【elementui】一招解决 el-table 重复写 loading 的问题

问题

项目中使用 elementui 开发表格的小伙伴知道，给 el-table 添加加载动画一般都是用 v-loading 指令，同时组建中添加 loading 变量来控制。可是当表格越来越多时，每次都必须加一个 loading 变量同时在请求数据的方法中必须耦合 loading 的控制逻辑。太多的重复工作，既降低效率，也使得代码难于维护。

解决方法

使用 Mixin + Proxy

• 第一步，创建 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()