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中的按钮、下拉搜索等，也是一样的解决方法。

总结

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3生命周期函数使用及说明(挂载、更新、销毁)
文章对比了Vue2和Vue3的生命周期函数,指出Vue3在Vue2的基础上增加了on前缀的生命周期,移除了了创建前后的生命周期钩子,并引入了setup和onUnmount等等新特性,文章强调了在单页面中生命函数可以多次使用,并提供了表格对比帮助理解
2026-05-05
浅谈Vue3中key的作用和工作原理
本文主要介绍了Vue3中key的作用和工作原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue实现答题功能
最近接手做一个前端小项目，基于vue实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧
2021-06-06
一文了解vue-router之hash模式和history模式
这篇文章主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
Vue数据双向绑定的实现方式讲解
Vue数据双向绑定原理：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新
2022-08-08
vuejs简单验证码功能完整示例
这篇文章主要介绍了vuejs简单验证码功能,结合完整实例形式分析了vue.js验证码的生成、显示、校验等相关操作技巧,需要的朋友可以参考下
2019-01-01
Vue自定义指令详解
这篇文章主要为大家详细介绍了Vue自定义指令的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue组件表单数据回显验证及提交的实例代码
今天小编就为大家分享一篇vue组件表单数据回显验证及提交的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue3 reactive 请求接口数据赋值后拿不到的问题及解决方案
这篇文章主要介绍了vue3 reactive 请求接口数据赋值后拿不到的问题及解决方案,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-04-04
Vue3使用icon的两种方式实例
vue开发网站的时候,往往图标是起着很重要的作用,下面这篇文章主要给大家介绍了关于Vue3使用icon的两种方式,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-11-11