element-ui官网提供的筛选样例只能对当前页的数据进行筛选
我这里是在表头上嵌入popover实现多页筛选，效果如下
代码如下
<template>
<div>
<!-- 表格 -->
<el-table
:data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
"
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" width="180">
<template slot="header" slot-scope="scope">
<el-popover
ref="popover"
placement="bottom"
trigger="click"
popper-class="popoverStyle"
>
<div slot="reference" class="div-popover">
姓名<i class="el-icon-arrow-down" />
</div>
<el-checkbox-group v-model="checkList" style="width: 80px">
<el-checkbox label="王小虎" class="el-checkbox__statusFirst"
>王小虎</el-checkbox
>
<el-checkbox label="王大锤" class="el-checkbox__statusOthers"
>王大锤</el-checkbox
>
</el-checkbox-group>
<el-row :gutter="1">
<el-col :span="12">
<el-link
:underline="false"
type="primary"
:disabled="checkList.length == 0"
@click="filterStatus"
>筛选</el-link
>
</el-col>
<el-col :span="12">
<el-link :underline="false" type="primary" @click="resetQuery"
>重置</el-link
>
</el-col>
</el-row>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<!-- 分页器 -->
<div class="block" style="margin-top: 15px">
<el-pagination
align="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 5, 10, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王大锤",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王大锤",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王大锤",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王大锤",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王大锤",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王大锤",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王大锤",
address: "上海市普陀区金沙江路 1516 弄",
},
],
tableData2: [],
checkList: [],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 10, // 每页的数据条数
};
},
created() {
this.tableData2 = this.tableData;
},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
//筛选
filterStatus() {
let newArr = this.tableData.filter((item) => {
console.log(this.checkList);
return item.name == this.checkList[0] || item.name == this.checkList[1];
});
this.tableData = newArr;
//点击筛选后，popover消失
this.$refs.popover.showPopper = false;
},
//重置
resetQuery() {
this.tableData=this.tableData2
this.checkList = [];
//点击重置后，popover消失
this.$refs.popover.showPopper = false;
},
},
};
</script>
<style>
.div-popover {
display: inline-block;
}
.el-checkbox__statusFirst {
display: block;
margin-bottom: 8px;
}
.el-checkbox__statusOthers {
display: block;
margin-top: 8px;
margin-bottom: 8px;
}
.el-popover.popoverStyle {
min-width: 100px;
}
.el-popover.popoverStyle {
min-width: 100px;
}
</style>
