欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年08月06日 11:00:46   作者：落落葉葉無聲  
這篇文章主要介紹了elementui如何解決el-table重復寫loading問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題

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

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

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

解決方法

使用 Mixin + Proxy

  • 第一步，創(chuàng)建 loading.js 作為 mixin，使用 Proxy 代理請求數據的方法 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()

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

相關文章

  • vue中銷毀定時器的幾種解決方案

    vue中銷毀定時器的幾種解決方案

    這篇文章主要給大家介紹了關于vue中銷毀定時器的幾種解決方案,銷毀定時器的操作一般是在beforeDestroy鉤子中進行，根據定時器的數量不同可以有多種解決方法,需要的朋友可以參考下
    2023-08-08
  • VUE頁面中通過雙擊實現(xiàn)復制表格中內容的示例代碼

    VUE頁面中通過雙擊實現(xiàn)復制表格中內容的示例代碼

    這篇文章主要介紹了VUE頁面中通過雙擊實現(xiàn)復制表格中內容，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解

    Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解

    在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下
    2023-06-06
  • vue中的傳值及賦值問題

    vue中的傳值及賦值問題

    這篇文章主要介紹了vue中的傳值及賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue實現(xiàn)對highlight-current-row方式整行選中后修改默認背景顏色

    vue實現(xiàn)對highlight-current-row方式整行選中后修改默認背景顏色

    這篇文章主要介紹了vue實現(xiàn)對highlight-current-row方式整行選中后修改默認背景顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 深入淺析vue中cross-env的使用

    深入淺析vue中cross-env的使用

    cross-env是跨平臺設置和使用環(huán)境變量的腳本。這篇文章主要介紹了vue中cross-env的使用,需要的朋友可以參考下
    2019-09-09
  • Vue下載Excel后報錯,或打不開的解決

    Vue下載Excel后報錯,或打不開的解決

    這篇文章主要介紹了Vue下載Excel后報錯,或打不開的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • vue?如何刪除數組中的某一條數據

    vue?如何刪除數組中的某一條數據

    這篇文章主要介紹了vue?如何刪除數組中的某一條數據，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • 淺析vue3響應式數據與watch屬性

    淺析vue3響應式數據與watch屬性

    這篇文章主要介紹了vue3響應式數據與watch屬性的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-05-05
  • 使用Vue生成動態(tài)表單

    使用Vue生成動態(tài)表單

    這篇文章主要介紹了Vue生成動態(tài)表單功能，這是小編第一次接這個需求，作為前端開發(fā)的我真的不知如何下手，今天小編通過一段代碼給大家分享vue生成動態(tài)表單效果,需要的朋友可以參考下
    2019-11-11

最新評論