组件库使用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
  })
}
GitHub 加速计划 / eleme / element
13
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:26 天前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐