elementui如何解決el-table重復寫loading問題

更新時間：2024年08月06日 11:00:46 作者：落落葉葉無聲

這篇文章主要介紹了elementui如何解決el-table重復寫loading問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題

項目中使用 elementui 開發(fā)表格的小伙伴知道，給 el-table 添加加載動畫一般都是用 v-loading 指令，同時組建中添加 loading 變量來控制。

可是當表格越來越多時，每次都必須加一個 loading 變量同時在請求數(shù)據(jù)的方法中必須耦合 loading 的控制邏輯。

太多的重復工作，既降低效率，也使得代碼難于維護。

解決方法

使用 Mixin + Proxy

第一步，創(chuàng)建 loading.js 作為 mixin，使用 Proxy 代理請求數(shù)據(jù)的方法 getTableData

export default {
  data() {
    return {
      loading: false,
    }
  },
  created() {
    this.getTableData= new Proxy(this.getTableData, {
      apply: (target, context, argumentsList) => {
        context.loading = true
        let res = target.apply(context, argumentsList)
        if(!(res instanceof Promise)) {
          throw new Error('Request should return an promise instance')
        }
        res.finally(() => {
          context.loading = false
        })
      }
    })
  }
}

第二步，在組建中使用引入 mixin

<script>
import loading from './loading.js'
export default {
  mixins: [loading],
  methods: {
     async getTableData() {
	    let res = await apiRequest()
	    this.tableData = res.list
	 }
  }
</script>

在線效果預覽

codePen 在線效果預覽

總結

通過使用 loading.js，我們就能一勞永逸地從重復的寫 loading 工作中解脫出來，同時避免寫錯寫漏，代碼的健壯性和可維護性也變高了。

對 vue2 的 mixin 或 Proxy 的知識不太了解的小伙伴，可以參考下面的官方文檔。

Vue2 文檔：可復用性混入

MDN文檔：使用 Proxy 代理方法 handler.apply()

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Babel自動生成Attribute文檔實現(xiàn)詳解
這篇文章主要為大家介紹了Babel自動生成Attribute文檔實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
vue+elementUI實現(xiàn)內嵌table的方法示例
本文主要介紹了vue+elementUI實現(xiàn)內嵌table的方法示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
vue3實現(xiàn)密碼輸入框效果的示例代碼
這篇文章主要為大家詳細介紹了如何利用vue3實現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下
2023-08-08
vue實現(xiàn)圖片滾動的示例代碼(類似走馬燈效果)
下面小編就為大家分享一篇vue實現(xiàn)圖片滾動的示例代碼(類似走馬燈效果)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue?element-ui表格內嵌進度條功能實現(xiàn)方法
Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關于Vue?element-ui表格內嵌進度條功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-03-03
在vue3.0中封裝button使用slot組件
這篇文章主要介紹了在vue3.0中封裝button使用slot組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue中methods的this指向問題淺析
相信我們寫Vue代碼時肯定都會在methods中用過this這個關鍵字，甚至還打印過this查看其內容。最終發(fā)現(xiàn)該實例對象竟然是我們的Vue實例對象
2022-10-10
使用Element的InfiniteScroll 無限滾動組件報錯的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報錯的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
vue3?動態(tài)綁定背景圖片方法示例
這篇文章主要為大家介紹了vue3動態(tài)綁定背景圖片實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-10-10
Vue項目新一代狀態(tài)管理工具Pinia的使用教程
pinia是一個輕量級的狀態(tài)管理庫,屬于 vue3 生態(tài)圈新的成員之一,下面這篇文章主要給大家介紹了關于Vue項目新一代狀態(tài)管理工具Pinia的使用教程,需要的朋友可以參考下
2022-11-11