淄博网站制作哪家公司好,湖北公司网站建设多少钱,网站建设行业政策,wordpress更改字体目录 前言效果展示分页效果展示搜索效果展示 代码分析分页功能过滤数据功能 全部代码 前言
在el-element的标签里的tableData数据过多时#xff0c;会导致表格页面操作卡顿。为解决这一问题#xff0c;有以下解决方法#xff1a; 分页加载#xff1a; 将大量数据进行分页会导致表格页面操作卡顿。为解决这一问题有以下解决方法 分页加载 将大量数据进行分页并且只在用户需要时加载当前页的数据可以减轻页面的数据负担。可以使用像 Element UI 提供的分页组件来实现分页加载功能。 虚拟滚动 对于大量数据的列表展示可以考虑使用虚拟滚动技术只渲染当前可见区域的数据而不是直接渲染所有数据。Element UI 的 Table 组件也支持虚拟滚动可以通过相应的配置开启虚拟滚动功能。可参考虚拟滚动其它博主的文章 数据筛选和搜索 提供数据筛选和搜索功能让用户可以根据条件快速定位到需要的数据减少不必要的数据展示。 服务端优化 如果数据来源于服务端可以在服务端对数据进行分页、压缩等处理以减少前端页面加载的数据量。 组件优化 检查页面中其他组件的性能表现确保没有其他组件或代码导致页面性能下降。 前端性能优化 考虑对前端代码进行性能优化比如减少不必要的重复渲染、减少对大数据量的循环操作等。 效果展示
分页效果展示 搜索效果展示 代码分析
数据结构
[{name1: 名称11,//需要搜索的关键字字段name1name2: 名称21,name3: 名称31,name4: 名称41,ID: 1},......
]data tableData: [], // 原始数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页显示的数量 searchText: ‘’, // 搜索的文本 filteredData: [], // 搜索后的数据 分页功能
首先在computed中使用displayData计算属性来根据当前页码和每页数量筛选出要显示的数据。在el-table标签中绑定displayDatael-table :datadisplayData/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();},}这样当用户输入搜索文本并提交时表格会根据搜索结果显示相应的数据并自动根据新的参数重新渲染分页组件。
全部代码
templatediv classtextbox-classdiv classtopbox-classel-input placeholder搜索姓名prefix-iconel-icon-searchv-modelsearchTextclassmleft-class searchinput-class/el-input/divdiv classmainbox-classel-table :datadisplayDatastripeborder:header-cell-style{background:rgb(113 167 228),color:white}highlight-current-rowstylewidth: 50%el-table-column propIDlabelID/el-table-columnel-table-column propname1label姓名1/el-table-columnel-table-column propname2label姓名2/el-table-columnel-table-column propname3label姓名3/el-table-columnel-table-column propname4label姓名4/el-table-column/el-table/divdiv classbotbox-classel-pagination size-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[10]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltableData.length/el-pagination/div/div
/templatescript
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();},}
};
/scriptstyle 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
