el-table中给每行添加loading效果案例

前言

如图所示,在el-table表格中,使用el-switch组件,想让每个组件在开关的时候都有一个loading效果,也可以是el-button,原理都是类似,下面直接给方案。

错误分析

错误代码如下,可以看见,我给switchLoading应用到每一个el-switch组件上了,所以每次都是全部组件loading,只要我们给它单独出来就可以搞定。

ts 复制代码
<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属性即可,这样最方便,也不用我们声明变量。

ts 复制代码
// 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,也可以解决!

ts 复制代码
// 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中的按钮、下拉搜索等,也是一样的解决方法。

相关推荐
BillKu1 天前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风1 天前
链表运用到响应式中
javascript·数据结构·链表
前端农民工ws1 天前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育1 天前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿1 天前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11251 天前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_1 天前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手1 天前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
遂心_1 天前
React中的onChange事件:从原理到实践的全方位解析
前端·javascript·react.js