【Elementui】组件库使用Table 表格组件为每一行的按钮添加loading效果

前言

        为了提高页面的观赏性和用户的体验，我们一般会在数据未加载之前添加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);
    }
复制代码

结果呢？

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

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