table显示医院列表,这里后台未做分页,总共数据大约8000条。
一次性全部赋值给table整个页面都会卡顿好几秒。
查看了请求接口到数据返回的时间为192ms,可以接受。
应该是页面渲染的问题。
这边就在前端做了分页处理。
调用接口
// 获取医院列表
getHospitalList() {
this.$api.Hospital.GetHospitalList().then(res => {
if (res.status == 200) {
this.tableData = res.data.response;
this.total = res.data.response.length;
}
});
},
// 分页
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
},
// 搜索
searchList() {
let params = "";
switch (this.select) {
case "1":
if (this.input3) {
params = this.input3;
this.$api.Hospital.QueryHospitalsByName(params).then(res => {
if (res.data.length > 0) {
this.tableData = res.data;
this.currentPage = 1;
this.total = res.data.length;
} else {
this.$message({
message: "未查询到医院信息",
type: "info"
});
}
console.log(res);
});
}
break;
case "2":
if (this.input3) {
params = this.input3;
this.$api.Hospital.QueryHospitalsByCode(params).then(res => {
if (res.data.length > 0) {
this.tableData = res.data;
this.currentPage = 1;
this.total = res.data.length;
} else {
this.$message({
message: "未查询到医院信息",
type: "info"
});
}
console.log(res);
});
}
break;
default:
console.log(111);
}
},
table组件
<el-table
:data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize ) "
border
style="width: 100%"
height="400"
size="mini"
highlight-current-row
>
……
</el-table>
<el-pagination
layout="prev, pager, next"
background
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
>
</el-pagination>
data里使用到的数据
data(){
return {
total: 0,
currentPage: 1,
pageSize: 50,
}
}