elementui如何解决el-table重复写loading问题
作者：落落叶叶无声
这篇文章主要介绍了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>在线效果预览
总结
通过使用 loading.js，我们就能一劳永逸地从重复的写 loading 工作中解脱出来，同时避免写错写漏，代码的健壮性和可维护性也变高了。
对 vue2 的 mixin 或 Proxy 的知识不太了解的小伙伴，可以参考下面的官方文档。
MDN文档：使用 Proxy 代理方法 handler.apply()
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。