VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据

实战场景描述

实际开发过程中,需要Tab切换不同类型的数据,如果是每个Tab表单是静态数据还好,但通常情况下基本上涉及的都是table数据,页面打开时,我们看到的是一个打开的Tab内容,但其实vue是把所有的内容都渲染了,只是其他都隐藏了,这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿,最佳实现思路肯定是Tab切换时才进行实时加载

VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据_第1张图片

1、确定好每个Tab内容

参考官网的例子改成我们的内容就好

VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据_第2张图片

2、Tab切换事件

今天的列子每个tab都涉及表格,为了方便后期维护和切换刷新,把每个Tab内容都单独抽离成一个组件,并且用v-if控制显示隐藏。这个操作在Tab点击切换时进行设置即可。

VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据_第3张图片

VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据_第4张图片 

3、完整代码

主页面:






已通过PassList2.vue:





 已否决列表NoPassList2.vue






已忽略列表IgnoreList2.vue






待审核列表AuditList2.vue






最终效果

VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据_第5张图片

注:表格中所有数据均为mock模拟数据,如有雷同纯属巧合^_^

你可能感兴趣的:(Element,VUE,el-tabs,el-table)