element table 数据量大页面卡顿

本文介绍了一种在前端实现分页处理的方法,针对一次性加载大量数据导致页面卡顿的问题,通过分页展示医院列表,有效提升了用户体验。文章还提供了搜索功能以进一步提高数据检索效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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,
	}
}
		

在这里插入图片描述

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值