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就可以統計數量了，是不是很簡單，有用的話點個贊呀。