el-table實現(xiàn)給每行添加loading效果案例

更新時間：2024年08月06日 10:21:22 作者：碼農(nóng)桃子

這篇文章主要介紹了el-table實現(xiàn)給每行添加loading效果案例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

如圖所示，在el-table表格中，使用el-switch組件，想讓每個組件在開關(guān)的時候都有一個loading效果，也可以是el-button，原理都是類似，下面直接給方案。

這是一個失敗的效果

錯誤分析

錯誤代碼如下，可以看見，我給switchLoading應(yīng)用到每一個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相等的時候才進行l(wèi)oading效果，這樣需要我們聲明一個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 = '' // 改動位置
    })
}