vue3+element-ui组件库表格组件为每一行的按钮添加单独的loading效果

组件库使用Table 表格组件为每一行的按钮添加loading效果
当我们给操作按钮添加一个loading效果时，发现这个表格的所有行的loading都会触发，可以使用下面的方法进行解决

<el-table-column label="操作" width="250">
  <template #default="scope">
    <el-button text type="primary" icon="video-play" @click="handleExe(scope.row.id,scope.row)" v-loading="scope.row.sendMsgLoading">开始执行</el-button>
    <el-button text type="primary" icon="switch-button" @click="handleFinish(scope.row.id, scope.row)" v-loading="scope.row.sendMsgLoading2">完成</el-button>
  </template>
</el-table-column>

点击按钮的时候，给这一行的身上加一个值叫做sendMsgLoading，当它为true时，触发v-loading

// 开始执行任务
const handleExe = (id: string, row: any) => {
  row.sendMsgLoading = true
  startPlan(row).then(res => {
    if (res.code == '0') {
      useMessage().success(res.msg ? res.msg :'操作成功')
    }else {
      useMessage().error(res.msg ? res.msg : '操作失败')
    }
  }).finally(() => {
    getDataList()
    row.sendMsgLoading = false
  })
}

// 完成任务
const handleFinish = (id: string, row: any) => {
  row.sendMsgLoading2 = true
  endPlan(row).then(res => {
    if (res.code == '0') {
      useMessage().success(res.msg ? res.msg :'操作成功')
    }else {
      useMessage().error(res.msg ? res.msg : '操作失败')
    }
  }).finally(() => {
    getDataList()
    row.sendMsgLoading2 = false
  })
}