element table 数据量大页面卡顿
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
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,
}
}

A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)