el-table实现给每行添加loading效果案例
更新时间：2024年08月06日 10:21:22 作者：码农桃子
这篇文章主要介绍了el-table实现给每行添加loading效果案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
如图所示，在el-table表格中，使用el-switch组件，想让每个组件在开关的时候都有一个loading效果，也可以是el-button，原理都是类似，下面直接给方案。
错误分析
错误代码如下，可以看见，我给switchLoading应用到每一个el-switch组件上了，所以每次都是全部组件loading，只要我们给它单独出来就可以搞定。
<el-table-column prop="enable" label="是否启用" width="80" align="center">
<template #default="{ row }">
<el-switch
v-model="row.enable"
active-text="正常"
inactive-text="停用"
inline-prompt
:loading="switchLoading"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
@change="changeHandle(row)"
/>
</template>
</el-table-column>
//ts
const changeHandle = (row) => {
switchLoading.value = true
changeEnable(row.id)
.then((resp) => {
ElMessage.success('操作成功！')
})
.catch((error) => {
console.log(error)
})
.finally(() => {
switchLoading.value = false
})
}
解决方法
方案一
让每一个switch组件都有自己的loading，那直接在row的属性上加一个loading属性即可，这样最方便，也不用我们声明变量。
// template
<el-table-column prop="enable" label="是否启用" width="80" align="center">
<template #default="{ row }">
<el-switch
v-model="row.enable"
active-text="正常"
inactive-text="停用"
inline-prompt
:loading="row.loading" // 改动位置
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
@change="changeHandle(row)"
/>
</template>
</el-table-column>
//ts
const changeHandle = (row) => {
row.loading = true // 改动位置
changeEnable(row.id)
.then((resp) => {
ElMessage.success('操作成功！')
})
.catch((error) => {
console.log(error)
})
.finally(() => {
row.loading = false // 改动位置
})
}
方案二
给loading属性加一个判断switchLoading == row.id，只有在id相等的时候才进行loading效果，这样需要我们声明一个const switchLoading = ref('') 变量来存储当前的id，也可以解决！
// template
<el-table-column prop="enable" label="是否启用" width="80" align="center">
<template #default="{ row }">
<el-switch
v-model="row.enable"
active-text="正常"
inactive-text="停用"
inline-prompt
:loading="switchLoading == row.id" // 改动位置
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
@change="changeHandle(row)"
/>
</template>
</el-table-column>
// ts
const changeHandle = (row) => {
switchLoading.value = row.id // 改动位置
changeEnable(row.id)
.then((resp) => {
ElMessage.success('操作成功！')
})
.catch((error) => {
console.log(error)
})
.finally(() => {
switchLoading.value = '' // 改动位置
})
}
最终效果
以上2种方案都可以解决，效果如下，你喜欢哪种解决方案呢？
我选择第一种同理，在table中的按钮、下拉搜索等，也是一样的解决方法。
总结
这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何解决vue项目打包后文件过大问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了基于Vue实现页面切换左右滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue附件下载无法打开的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家介绍了Vue3+Element Plus的项目搭建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了Vue中通过Vue.extend动态创建实例的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了Vue项目服务器部署刷新页面404问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了如何实现无感刷新token，当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。下面我们大家一起进入文章看看实现思路即详细内容,需要的朋友可以参考一下2021-11-11
vue.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下2017-05-05
浅谈angular4.0中路由传递参数、获取参数最nice的写法
下面小编就为大家分享一篇浅谈angular4.0中路由传递参数、获取参数最nice的写法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
这篇文章主要介绍了vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法，非常不错，具有参考借鉴价值，,需要的朋友可以参考下2017-02-02
最新评论