element表格分页+数据过滤筛选

前言

在el-element的标签里的tableData数据过多时，会导致表格页面操作卡顿。为解决这一问题，有以下解决方法：

分页加载： 将大量数据进行分页，并且只在用户需要时加载当前页的数据，可以减轻页面的数据负担。可以使用像 Element UI 提供的分页组件来实现分页加载功能。
虚拟滚动： 对于大量数据的列表展示，可以考虑使用虚拟滚动技术，只渲染当前可见区域的数据，而不是直接渲染所有数据。Element UI 的 Table 组件也支持虚拟滚动，可以通过相应的配置开启虚拟滚动功能。可参考虚拟滚动其它博主的文章
数据筛选和搜索： 提供数据筛选和搜索功能，让用户可以根据条件快速定位到需要的数据，减少不必要的数据展示。
服务端优化： 如果数据来源于服务端，可以在服务端对数据进行分页、压缩等处理，以减少前端页面加载的数据量。
组件优化： 检查页面中其他组件的性能表现，确保没有其他组件或代码导致页面性能下降。
前端性能优化： 考虑对前端代码进行性能优化，比如减少不必要的重复渲染、减少对大数据量的循环操作等。

效果展示

分页效果展示

搜索效果展示

代码分析

数据结构：

[{"name1": "名称11",//需要搜索的关键字字段name1"name2": "名称21","name3": "名称31","name4": "名称41","ID": 1},......
]

data：

tableData: [], // 原始数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示的数量
searchText: ‘’, // 搜索的文本
filteredData: [], // 搜索后的数据

分页功能

首先，在computed中，使用displayData计算属性来根据当前页码和每页数量筛选出要显示的数据。在el-table标签中绑定displayData：<el-table :data="displayData"></el-table>

通过computed属性，我们可以定义根据响应式数据计算的属性，并在模板中使用。Vue会自动追踪依赖关系，当依赖的响应式数据发生变化时，computed属性会重新计算其值。

computed: {// 根据当前页码和每页数量计算显示的数据displayData () {const startIndex = (this.currentPage - 1) * this.pageSize;const endIndex = startIndex + this.pageSize;return this.tableData.slice(startIndex, endIndex);},},

其次，在methods中，handleSizeChange方法用于处理改变每页显示数量的事件，handleCurrentChange方法用于处理改变当前页码的事件。

// 改变每页显示的数量时触发
handleSizeChange(newSize) {this.pageSize = newSize;this.currentPage = 1; // 重置当前页码为第一页
},
// 改变当前页码时触发
handleCurrentChange(newPage) {this.currentPage = newPage;
},

最后，在mounted中，我们假设通过某种方式获取了原始数据，并将其赋值给tableData数组，若是调用接口，则在调用接口将获取的数据赋值给tableData数组即可。这里示例是用的json数据。

data () {return {tableData: jsondata,//方法一：使用示例数据进行演示，将json数据赋值给tableData数组};
},
mounted() {// 方法二：实际情况下可以通过接口请求或其他方式获取数据// 假设tableData是从后端获取的原始数据this.searchFun();
},
methods: {searchFun(){//......调用接口.then((res) => {this.tableData = res.obj;//将数据赋值给tableData}).catch((err) => {console.log("err",err);})},
}

这样，当用户改变每页显示数量或当前页码时，表格会自动根据新的参数重新渲染显示数据，同时Element UI的分页组件也会更新页码和显示的数据数量

过滤数据功能

1、在data中，添加了filteredData用于存储搜索后的数据，searchText用于保存搜索的文本。

searchText: '', // 搜索的文本
filteredData: [], // 搜索后的数据

2、在computed中，修改了displayData计算属性，使用filteredData进行分页显示。

computed: {displayData () {// 根据当前页码和每页数量计算显示的数据const startIndex = (this.currentPage - 1) * this.pageSize;const endIndex = startIndex + this.pageSize;return this.filteredData.slice(startIndex, endIndex);},
},

3、在mounted钩子中，初始化了tableData和filteredData，并将它们设置为示例数据。你可以根据实际情况从后端获取数据。
4、在methods中，添加了searchTextFun 方法来根据搜索文本过滤数据，并重置当前页码为第一页。若是在调用接口方法获取数据后调用searchTextFun即可。这里用的是name1字段，可视情况改变：item.name1.includes(this.searchText)
.filter()方法直达站

mounted () {this.filteredData = this.tableData;this.searchTextFun();
},
methods: {// 根据搜索文本过滤数据searchTextFun () {this.filteredData = this.tableData.filter(item =>item.name1.includes(this.searchText));//过滤数据this.currentPage = 1; // 重置当前页码为第一页},
}

5、在watch中，监听searchText的变化，并在变化时执行搜索操作。

watch: {searchText () {// 监听搜索文本变化，执行搜索操作this.searchTextFun();},}

这样，当用户输入搜索文本并提交时，表格会根据搜索结果显示相应的数据，并自动根据新的参数重新渲染分页组件。

全部代码

<template><div class="textbox-class"><div class="topbox-class"><el-input placeholder="搜索姓名"prefix-icon="el-icon-search"v-model="searchText"class="mleft-class searchinput-class"></el-input></div><div class="mainbox-class"><el-table :data="displayData"stripeborder:header-cell-style="{background:'rgb(113 167 228)',color:'white'}"highlight-current-rowstyle="width: 50%"><el-table-column prop="ID"label="ID"></el-table-column><el-table-column prop="name1"label="姓名1"></el-table-column><el-table-column prop="name2"label="姓名2"></el-table-column><el-table-column prop="name3"label="姓名3"></el-table-column><el-table-column prop="name4"label="姓名4"></el-table-column></el-table></div><div class="botbox-class"><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"></el-pagination></div></div>
</template><script>
import jsondata from './test.json';
export default {data () {return {tableData: jsondata,currentPage: 1, // 当前页码pageSize: 10, // 每页显示的数量searchText: '', // 搜索的文本filteredData: [], // 搜索后的数据};},created () { },computed: {displayData () {// 根据当前页码和每页数量计算显示的数据const startIndex = (this.currentPage - 1) * this.pageSize;const endIndex = startIndex + this.pageSize;return this.filteredData.slice(startIndex, endIndex);},},mounted () {this.filteredData = this.tableData;this.searchTextFun();},methods: {// 改变每页显示的数量时触发handleSizeChange (newSize) {this.pageSize = newSize;this.currentPage = 1; // 重置当前页码为第一页},// 改变当前页码时触发handleCurrentChange (newPage) {this.currentPage = newPage;},// 根据搜索文本过滤数据searchTextFun () {this.filteredData = this.tableData.filter(item =>item.name1.includes(this.searchText));this.currentPage = 1; // 重置当前页码为第一页},},watch: {searchText () {// 监听搜索文本变化，执行搜索操作this.searchTextFun();},}
};
</script><style scoped>
.textbox-class {width: 100%;height: 100%;
}
.topbox-class {height: 5%;display: flex;align-items: center;margin-left: 0.5rem;
}
.mainbox-class {height: 55%;
}
.botbox-class {height: 3%;
}
.searchinput-class {width: 20%;
}
</style>