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

elementui如何解決el-table重復(fù)寫(xiě)loading問(wèn)題

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

問(wèn)題

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

可是當(dāng)表格越來(lái)越多時(shí)，每次都必須加一個(gè) loading 變量同時(shí)在請(qǐng)求數(shù)據(jù)的方法中必須耦合 loading 的控制邏輯。

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

解決方法

使用 Mixin + Proxy

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

在線效果預(yù)覽

codePen 在線效果預(yù)覽

總結(jié)

通過(guò)使用 loading.js，我們就能一勞永逸地從重復(fù)的寫(xiě) loading 工作中解脫出來(lái)，同時(shí)避免寫(xiě)錯(cuò)寫(xiě)漏，代碼的健壯性和可維護(hù)性也變高了。

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

Vue2 文檔：可復(fù)用性混入

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

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

相關(guān)文章

  • vue中銷毀定時(shí)器的幾種解決方案

    vue中銷毀定時(shí)器的幾種解決方案

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

    VUE頁(yè)面中通過(guò)雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的示例代碼

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

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

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

    vue中的傳值及賦值問(wèn)題

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

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

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

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

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

    Vue下載Excel后報(bào)錯(cuò),或打不開(kāi)的解決

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

    vue?如何刪除數(shù)組中的某一條數(shù)據(jù)

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

    淺析vue3響應(yīng)式數(shù)據(jù)與watch屬性

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

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

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

最新評(píng)論