Vue + Element-ui 分页+搜索 table中的data属性重复使用问题
背景:1、在使用Vue + Element-ui 用table 表格做分页的时候使用:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"2、在使用Vue + Element-ui 用table表格做搜索时的时候使用:data="tableData.filter(data => !search || dat
·
背景:
1、在使用Vue + Element-ui 用table 表格做分页的时候使用
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
2、在使用Vue + Element-ui 用table表格做搜索时的时候使用
:data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase())|| data.commodity_name.toLowerCase().includes(search.toLowerCase()))
那么问题就来了,都是用data属性,如果同时需要分页和搜索怎么办。
所以:
首先在最开始就把整体上面设计好:
1、设置一个变量用来存放数据的长度。
(因为查询从时候整个数据长度是要变的,当然页码长度也要跟着变,不然就会出现,分页还是之前的分页,但是数据没那么多。意思就是说查询的数据肯定没有总数据多,但是显示的是总数据的页码)
注意要用parseInt 转换格式,因为这里需要一个int格式,
并在获取完数据之后,把数组长度赋值给这个变量
2、使用computed 监听
我们在使用搜索框时有这么一个属性
同监控这个属性变化区分此时是搜索还是分页
computed: {
table_data() {
let search = this.search;
// 搜索功能
if (search){
let list =this.tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase())|| data.commodity_name.toLowerCase().includes(search.toLowerCase()));
let fenye = list.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
// 获取查询的结果,把数组长度赋值给 分页组件中的total
this.tableData_length = fenye.length;
return list,fenye
}
// 分页功能
else {
//所有数据的长度 赋值给分页组件中的total
this.tableData_length = this.tableData.length;
let fenye = this.tableData.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
return fenye
}
}
}
此时data 属性绑定 方法名
此时: 既可以分页,又可以查询,查询后的数据分页显示正常,删除查询条件后,数据显示全部分页正常。
完美!
更多推荐
已为社区贡献3条内容
所有评论(0)