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()
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue中销毁定时器的几种解决方案,销毁定时器的操作一般是在beforeDestroy钩子中进行，根据定时器的数量不同可以有多种解决方法,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了VUE页面中通过双击实现复制表格中内容，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
Vue使用 onMounted 确保在组件挂载后执行异步操作示例详解
在 Vue.js 或其他类似框架中，使用 onMounted 是为了确保在组件挂载后执行异步操作，这篇文章主要介绍了Vue使用onMounted确保在组件挂载后执行异步操作,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue中的传值及赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue实现对highlight-current-row方式整行选中后修改默认背景颜色
这篇文章主要介绍了vue实现对highlight-current-row方式整行选中后修改默认背景颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue下载Excel后报错,或打不开的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了vue 如何删除数组中的某一条数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue3响应式数据与watch属性的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue生成动态表单功能，这是小编第一次接这个需求，作为前端开发的我真的不知如何下手，今天小编通过一段代码给大家分享vue生成动态表单效果,需要的朋友可以参考下2019-11-11
最新评论