vue+element 表格筛选

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

筛选是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>