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

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

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

前言

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

這是一個(gè)失敗的效果

錯(cuò)誤分析

錯(cuò)誤代碼如下，可以看見，我給switchLoading應(yīng)用到每一個(gè)el-switch組件上了，所以每次都是全部組件loading，只要我們給它單獨(dú)出來(lái)就可以搞定。

<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
    })
}

解決方法

方案一

讓每一個(gè)switch組件都有自己的loading，那直接在row的屬性上加一個(gè)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" // 改動(dòng)位置
       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 // 改動(dòng)位置
  changeEnable(row.id)
    .then((resp) => {
      ElMessage.success('操作成功！')
    })
    .catch((error) => {
      console.log(error)
    })
    .finally(() => {
      row.loading = false // 改動(dòng)位置
    })
}

方案二

給loading屬性加一個(gè)判斷switchLoading == row.id，只有在id相等的時(shí)候才進(jìn)行l(wèi)oading效果，這樣需要我們聲明一個(gè)const switchLoading = ref('') 變量來(lái)存儲(chǔ)當(dāng)前的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"  // 改動(dòng)位置
      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 // 改動(dòng)位置
  changeEnable(row.id)
    .then((resp) => {
      ElMessage.success('操作成功！')
    })
    .catch((error) => {
      console.log(error)
    })
    .finally(() => {
      switchLoading.value = '' // 改動(dòng)位置
    })
}