实战场景描述
实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。
1、确定好每个Tab内容
参考官网的例子改成我们的内容就好
2、Tab切换事件
今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个Tab内容都单独抽离成一个组件，并且用v-if控制显示隐藏。这个操作在Tab点击切换时进行设置即可。
3、完整代码
主页面：
<template>
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" >
<!-------------------------------------------------------->
<el-tab-pane label="待审核" name="audit">
<AuditList v-if="activeName == 'audit'" ref="audit"></AuditList>
</el-tab-pane>
<!-------------------------------------------------------->
<el-tab-pane label="已通过" name="pass">
<PassList v-if="activeName == 'pass'" ref="pass"></PassList></el-tab-pane>
<!-------------------------------------------------------->
<el-tab-pane label="已否决" name="noPass">
<NoPassList v-if="activeName == 'noPass'" ref="noPass"></NoPassList>
</el-tab-pane>
<!-------------------------------------------------------->
<el-tab-pane label="已忽略" name="ignore">
<IgnoreList v-if="activeName == 'ignore'" ref="ignore"></IgnoreList>
</el-tab-pane>
</el-tabs>
</template>
<script>
import PassList from "./PassList2";
import NoPassList from "./NoPassList2";
import IgnoreList from "./IgnoreList2";
import AuditList from "./AuditList2";
export default {
name: "TEMPLATE",
components: {
PassList,
NoPassList,
IgnoreList,
AuditList
},
data(){
return {
activeName: 'audit'
};
},
mounted(){
this.onQuery();
},
methods:{
handleClick(tab, event) {
this.activeName = tab.name;
var that = this;
setTimeout(function(){
that.onQuery();
},500);
},
onQuery() {
this.$refs[this.activeName].getList();
},
}
}
</script>
<style scoped>
</style>
已通过PassList2.vue：
<template>
<div>
<el-table
:data="tableData"
border
stripe
style="width: 100%">
<el-table-column
label="序号"
align="center"
width="70px">
<template slot-scope="scope">
{{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
</template>
</el-table-column>
<el-table-column
label="人员姓名"
prop="pName">
</el-table-column>
<el-table-column
label="联系电话"
prop="phone">
</el-table-column>
<el-table-column
label="所在楼层"
prop="floor">
</el-table-column>
<el-table-column
label="房间编号"
prop="spaceNum">
</el-table-column>
<el-table-column
label="人员备注"
prop="notes">
</el-table-column>
<el-table-column
label="提交时间"
prop="submitTime">
</el-table-column>
<el-table-column
label="审核时间"
prop="auditTime">
</el-table-column>
</el-table>
<el-pagination background
layout="total, prev, pager, next, sizes,jumper"
:page-sizes="[5, 10, 15]"
:page-size="formInline.pageSize"
:total="dataTotalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
export default {
name: "PassList",
data(){
return {
dataTotalCount: 0, //查询条件的总数据量
formInline: {
currentPage: 1,
pageSize:10,
},
tableData: [],
}
},
methods:{
//分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
handleSizeChange: function(size) {
this.formInline.pageSize = size;
this.getList();
},
// 控制页面的切换
handleCurrentChange: function(currentpage) {
this.formInline.currentPage = currentpage;
this.getList();
},
getList() {
var that = this;
that.axios.get('/dev-api/server/accessAudit/passList', {params:this.formInline})
.then(function (response) {
that.tableData = response.data.data.items;
that.dataTotalCount = response.data.data.total;
})
.catch(function (error) {
that.$message({
type: 'error',
message: '系统异常：'+error
});
});
},
}
}
</script>
<style scoped>
</style>已否决列表NoPassList2.vue
<template>
<div>
<el-table
:data="tableData"
border
stripe
style="width: 100%">
<el-table-column
label="序号"
align="center"
width="70px">
<template slot-scope="scope">
{{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
</template>
</el-table-column>
<el-table-column
label="人员姓名"
prop="pName">
</el-table-column>
<el-table-column
label="联系电话"
prop="phone">
</el-table-column>
<el-table-column
label="所在楼层"
prop="floor">
</el-table-column>
<el-table-column
label="房间编号"
prop="spaceNum">
</el-table-column>
<el-table-column
label="提交时间"
prop="submitTime">
</el-table-column>
<el-table-column
label="人员备注"
prop="notes">
</el-table-column>
<el-table-column
label="审核时间"
prop="auditTime">
</el-table-column>
<el-table-column
label="否决原因"
prop="reason">
</el-table-column>
</el-table>
<el-pagination background
layout="total, prev, pager, next, sizes,jumper"
:page-sizes="[5, 10, 15]"
:page-size="formInline.pageSize"
:total="dataTotalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
export default {
name: "NoPassList",
data(){
return {
dataTotalCount: 0, //查询条件的总数据量
formInline: {
currentPage: 1,
pageSize:10,
},
tableData: [],
}
},
methods:{
//分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
handleSizeChange: function(size) {
this.formInline.pageSize = size;
this.getList();
},
// 控制页面的切换
handleCurrentChange: function(currentpage) {
this.formInline.currentPage = currentpage;
this.getList();
},
getList(data) {
if(data){
this.formInline.info = data.info;
this.formInline.pType = data.pType;
this.formInline.floor = data.floor;
}
var that = this;
that.axios.get('/dev-api/server/accessAudit/noPassList', {params:this.formInline})
.then(function (response) {
that.tableData = response.data.data.items;
that.dataTotalCount = response.data.data.total;
})
.catch(function (error) {
that.$message({
type: 'error',
message: '系统异常：'+error
});
});
},
}
}
</script>
<style scoped>
</style>已忽略列表IgnoreList2.vue
<template>
<div>
<el-table
:data="tableData"
border
stripe
style="width: 100%">
<el-table-column
label="序号"
align="center"
width="70px">
<template slot-scope="scope">
{{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
</template>
</el-table-column>
<el-table-column
label="人员姓名"
prop="pName">
</el-table-column>
<el-table-column
label="联系电话"
prop="phone">
</el-table-column>
<el-table-column
label="所在楼层"
prop="floor">
</el-table-column>
<el-table-column
label="房间编号"
prop="spaceNum">
</el-table-column>
<el-table-column
label="人员备注"
prop="notes">
</el-table-column>
<el-table-column
label="提交时间"
prop="submitTime">
</el-table-column>
<el-table-column
label="审核时间"
prop="auditTime">
</el-table-column>
</el-table>
<el-pagination background
layout="total, prev, pager, next, sizes,jumper"
:page-sizes="[5, 10, 15]"
:page-size="formInline.pageSize"
:total="dataTotalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
export default {
name: "IgnoreList",
data(){
return {
dataTotalCount: 0, //查询条件的总数据量
formInline: {
currentPage: 1,
pageSize:10,
},
tableData: [],
}
},
methods:{
//分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
handleSizeChange: function(size) {
this.formInline.pageSize = size;
this.getList();
},
// 控制页面的切换
handleCurrentChange: function(currentpage) {
this.formInline.currentPage = currentpage;
this.getList();
},
getList(data) {
if(data){
this.formInline.info = data.info;
this.formInline.pType = data.pType;
this.formInline.floor = data.floor;
}
var that = this;
that.axios.get('/dev-api/server/accessAudit/ignoreList', {params:this.formInline})
.then(function (response) {
that.tableData = response.data.data.items;
that.dataTotalCount = response.data.data.total;
})
.catch(function (error) {
that.$message({
type: 'error',
message: '系统异常：'+error
});
});
},
}
}
</script>
<style scoped>
</style>待审核列表AuditList2.vue
<template>
<div>
<el-table
:data="tableData"
border
stripe
style="width: 100%">
<el-table-column
align="center"
label="序号"
width="70px">
<template slot-scope="scope">
{{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
</template>
</el-table-column>
<el-table-column
label="人员姓名"
prop="pName">
</el-table-column>
<el-table-column
label="联系电话"
prop="phone">
</el-table-column>
<el-table-column
label="所在楼层"
prop="floor">
</el-table-column>
<el-table-column
label="房间编号"
prop="spaceNum">
</el-table-column>
<el-table-column
label="认证图片"
prop="imgUrl">
</el-table-column>
<el-table-column
label="提交时间"
prop="submitTime">
</el-table-column>
<el-table-column
label="人员备注"
prop="notes">
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button icon="el-icon-s-claim" size="mini">通过</el-button>
<el-button icon="el-icon-s-release" size="mini">否决</el-button>
<el-button icon="el-icon-takeaway-box" size="mini">忽略</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination :page-size="formInline.pageSize"
:page-sizes="[5, 10, 15]"
:total="dataTotalCount"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
background
layout="total, prev, pager, next, sizes,jumper">
</el-pagination>
</div>
</template>
<script>
export default {
name: "TEMPLATE",
data() {
return {
dataTotalCount: 0, //查询条件的总数据量
formInline: {
currentPage: 1,
pageSize: 10,
},
tableData: [],
}
},
methods: {
//分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
handleSizeChange: function (size) {
this.formInline.pageSize = size;
this.getList();
},
// 控制页面的切换
handleCurrentChange: function (currentpage) {
this.formInline.currentPage = currentpage;
this.getList();
},
getList() {
var that = this;
that.axios.get('/dev-api/server/accessAudit/list', {params: that.formInline})
.then(function (response) {
that.tableData = response.data.data.items;
that.dataTotalCount = response.data.data.total;
})
.catch(function (error) {
that.$message({
type: 'error',
message: '系统异常：' + error
});
});
}
}
}
</script>
<style scoped>
</style>最终效果
注：表格中所有数据均为mock模拟数据，如有雷同纯属巧合^_^
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
