博客

前言

为了提高页面的观赏性和用户的体验，我们一般会在数据未加载之前添加loading效果来阻塞用户操作;

是什么？

点击其中一行，所有按钮loading效果都会触发
复制代码

为什么？

html部分
<el-table-column label="操作">
    <template>
      <el-button
        type="text"
        size="small"
        :loading="loading"
        @click="handleClick">
        编辑
      </el-button>
    </template>
</el-table-column>
复制代码

因为每一行的

:loading

属性都绑定了同一个变量

loading

;

js部分
 data() {
    return {
      tableData: [], // 数据源
      dialogVisible: false, // 编辑模态框
      loading: false, // 按钮加载状态
    }
  },
  methods:{
    // 编辑按钮点击事件
    handleClick() {
      // 按钮加载状态开启
      this.loading = true
      // 模拟请求数据需要2秒，请求成功后展示模态框
      setTimeout(() => {
        // 模态框开启
        this.dialogVisible = true
        // 关闭按钮加载状态
        this.loading = false
      }, 2000);
    }
  },
复制代码

并且每一个

编辑

按钮都会触发同一个

handleClick

方法，该方法中把唯一的

loading

变量置为了

true

;

怎么做？

第一步

首先确定每一行的:loading属性需要绑定唯一的变量，来控制加载状态的显示与否
复制代码

js部分
created() {
    // 延时模拟获取数据
   setTimeout(() => {
     // getTableList()方法返回[{name: 'zs', age: 12},{name: 'ls', age: 22},...]数据结构
     getTableList().then(res => {
       // 获取数据成功后赋值给数据源
       this.tableData = res
       this.tableData.map(item => {
         this.$set(item, 'loading', false)
         return item
       })
     })
   }, 500);
  }
复制代码

知识点1：map方法创建一个新数组，这个新数组

由原数组中的每个元素都调用一次

提供的函数后的返回值组成;

参考链接

知识点2：Vue.set( target, propertyName/index, value )向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新;

参考链接

在获取数据成功之后，遍历数组中的数据，为每一项数据添加key为

loading

,value默认为

false


遍历完成后的数据结构
tableData=[{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        loading: false
      },....]
复制代码

第二步

经过第一步对数据的处理，每一个数据都有自己唯一的loading为false，通过作用域插槽拿到每一行的数据row，为:loading属性绑定唯一的loading
复制代码

html部分
<el-table-column label="操作">
    <template v-slot="{row}">
      <el-button
        type="text"
        size="small"
        :loading="row.loading"
        @click="handleClick(row)">
        编辑
      </el-button>
    </template>
</el-table-column>
复制代码

如何通过点击事件

handleClick()

方法控制每一行的

loading

状态呢？

js部分
 // 编辑按钮点击事件
    handleClick(row) {
      // 按钮加载状态开启
      row.loading = true
      // 模拟请求数据需要2秒，请求成功后展示模态框
      setTimeout(() => {
        this.dialogVisible = true
        // 关闭按钮加载状态
        row.loading = false
      }, 2000);
    }
复制代码

结果呢？

问题在于开始使用一个变量控制所有按钮的加载状态，想要的是每一行的按钮状态是独立的，就应该为每一行的数据添加唯一的标识；

路漫漫其修远兮，吾将上下而求索