element-ui 表格中带有按钮的loading详细解决方案

最近写项目遇到一个问题就是表格里的按钮加载状态设置，就是表格里的按钮在进行操作时，显示相应的加载状态，操作完成后，恢复正常状态。

解决思路

• 方案一：data中设置一个对象，里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,... }
  缺点：不知道会列表里会有多少条数据（鸡肋，不建议采用，本篇文章不再介绍）
• 方案二：按钮直接设置 v-loading="scope.row.MarkUpPirceLoading"
  可行，建议使用，下面介绍这种解决方案

解决方案

<el-table-column v-if="isStudy === 0" label="操作">
   <template slot-scope="scope">
     <!-- 提醒按钮 -->
     <el-button
       :loading="scope.row.remindLoading"
       icon="el-icon-message-solid"
       size="mini"
       type="primary"
       @click="remind(scope.row)"
     />
   </template>
 </el-table-column>

remind(row) {
  this.$set(row, 'remindLoading', true)
  console.log('remind....')
  setTimeout(() => {
    this.$message.success('提醒成功')
    this.$set(row, 'remindLoading', false)
  }, 2000)
}

大功告成，现在每个按钮点击时都有自己的加载状态了

详解

这里使用了this.$set(row, 'remindLoading', true)，对vue不太了解的童鞋可能会感到疑问，这是什么方法？为什么要使用这个方法？直接修改row的remindLoading的值不就好了嘛，即row.remindLoading = true/false。

那么我们来看看这样写的话，会怎样?

remind(row) {
  row.remindLoading = true
  console.log('remind....')
  setTimeout(() => {
    this.$message.success('提醒成功')
   	row.remindLoading = false
  }, 2000)
  console.log(row)
}

这样写的话，发现按钮的加载状态并未出现，查看一下控制台输出的row：

属性设置到了 ob 外面，vue监听不到变化，也就是说我们进行改变后dom不会更新

在这里我们发现虽然这个对象身上已经有了remindLoading属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化

关于这个问题的解决方案就是使用this.$set(row, 'remindLoading', true)，即

remind(row) {
  this.$set(row, 'remindLoading', true)
  console.log('remind....')
  setTimeout(() => {
    this.$message.success('提醒成功')
    this.$set(row, 'remindLoading', false)
  }, 2000)
  console.log(row)
}

我们发现，通过这这种方式为对象添加属性之后，它的对象身上多了get和set方法，所以，此时我们再次操作该属性的时候，就会引起视图的更新啦