筛选是element 组件 自己有的东西，按照文档撸 是没有问题
这里存在一个情况是，如果 筛选 的数据没有 那么整个表格为空白，产品要加提示 例如：暂无筛选的数据
解决方案：通过 ref 获取整个table 里面有一个tableData(就是当前表格数据，我的是这个)，这个一个数组，可根据这个数据进行判断筛选后的数据是否为空
补充：会出现筛选不符合条件 出现 提示，点击重置按钮时 提示依然存在的问题
根据 filter-change 方法 进行判断
<template>
<el-table ref="filterTable" :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" sortable width="180" column-key="date"></el-table-column> //sortable 属性 排序作用
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址" ></el-table-column>
<el-table-column
prop="tag"
label="标签"
width="100"
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" //这里是代表有多少个筛选项 格式 必须为数组对象，并且每个对象必须有 text 和 value key值
:filter-method="filterTag" //可以理解为过滤 方法 ，一共有value , row , column 可以依次打印看看咯
filter-placement="bottom-end" //代表弹框打开的位置
>
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions
>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
</template> <script>
export default {
components: {},
name: "table-filter",
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "张小虎",
address: "上海市普陀区金沙江路 1518 弄",
tag: "家"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
tag: "公司"
},
{
date: "2016-05-01",
name: "鲁小虎",
address: "上海市普陀区金沙江路 1519 弄",
tag: "家"
},
{
date: "2016-05-03",
name: "鞠磊小虎",
address: "上海市普陀区金沙江路 1516 弄",
tag: "公司"
}
]
};
},
created() {},
mounted() {},
methods: {
//筛选方法，返回的是 true or false
filterTag(value, row, column) {
return row.tag === value;
}
}
};
</script>