elementUI表格筛选统计数量

elementU表格筛选统计数量

最近vue做表格的时候需要使用到筛选的功能，查了一下官方文档，有两种筛选。

一、绑定在column上的filter-method

有的人把这个叫做前端筛选，筛选需要有几个条件喽。

1.筛选列表filterList，例如筛选的列是部门，则存放所有部门的集合，当然你需要对部门进行去重。

2.按照官方文档写就可以了。

filterMethod(value, row, column) {
  const property = column['property'];
  console.log(value)
  return row[property]===value;
}
           

使用完之后呢，确实实现了筛选的功能，但是呢配合上分页功能就产生了问题，我使用的是前端分页，发现筛选后无法获取筛选后的数据条数，就是无法配合分页，在filterMethod操作后，直接进入了死循环，于是我采取了第二种方案。

二、绑定在table上的@filter-change="filterTagTable"

有的人把这个叫做后端筛选，其实就是自己写一下筛选逻辑，筛选呢也需要几个条件喽。

1.filter-change需要在需要筛选的列上添加column-key,属性值与列的prop一致就可以了。

<el-table-column
  align="center"
  prop="department"
  column-key="department"
  :filters="filtersList"
  filter-placement="bottom-start"
  label="科室">
</el-table-column>      

2.接下来就可以在filterTagTable写你自己筛选逻辑了，我根据筛选勾选的数据length来进行分类

if(filters.department.length===0){//重置
你自己的逻辑
}
else{//多选和单选
  this.selectList = this.tableData.filter((item) => {//得到筛选后的数组
    for(let i=0;i<filters.department.length;i++){
     if( item.department===filters.department[i]) {
       return true;
       break;
     }
    }
  })
           

计算selectList的length就可以统计数量了，是不是很简单，有用的话点个赞呀。