vue3+element-ui组件库表格组件为每一行的按钮添加单独的loading效果
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
组件库使用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
})
}




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 年前
更多推荐
所有评论(0)