elementui如何解决el-table重复写loading问题
更新时间：2024年08月06日 11:00:46 作者：落落叶叶无声
这篇文章主要介绍了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()
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Babel自动生成Attribute文档实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本文主要介绍了vue+elementUI实现内嵌table的方法示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要为大家详细介绍了如何利用vue3实现6位的密码输入框效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
下面小编就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,下面这篇文章主要给大家介绍了关于Vue element-ui表格内嵌进度条功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了在vue3.0中封装button使用slot组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
相信我们写Vue代码时肯定都会在methods中用过this这个关键字，甚至还打印过this查看其内容。最终发现该实例对象竟然是我们的Vue实例对象2022-10-10
使用Element的InfiniteScroll 无限滚动组件报错的解决
这篇文章主要介绍了使用Element的InfiniteScroll 无限滚动组件报错的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要为大家介绍了vue3动态绑定背景图片实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
pinia是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,下面这篇文章主要给大家介绍了关于Vue项目新一代状态管理工具Pinia的使用教程,需要的朋友可以参考下2022-11-11
最新评论