vue element-ui 中 el-table数据过滤

Question

效果图：

<el-table-column
    prop="name"
    label="分类"
    :filters="classification"
    :filter-multiple="false"
    :filter-method="filterClassification">
</el-table-column>

问题： 因每次筛选需后台请求数据，如何点击“全部”时，获取到对应的操作？

Answer 1

filter-method是用来监听筛选条件的改变的,是数据过滤使用的方法
如果是单选情况,那么点击某一项后就会触发
如果是多选情况,那么在点击筛选按钮后会触发该函数

 filterClassification(value, row, column) {
        //value:选中值
        //row:包括该行所有信息的对象
        switch(value){
            case "全部":
            //TODO 进行相关接口的请求 获取到数值后更新表格的data属性
            break;
        }
      }

---

如果点击"全部"选项无法触发filter-method函数
在最外层监听一个函数 @filter-change
这个函数监听整个表格的筛选条件

  <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%"
    @filter-change="filterTagTable"
>
</el-table>

filterTagTable(filters){
    console.log(filters)
}

筛选条件发生变化时,会触发这个函数,如果点击全部的话也是会相应的

判断一下筛选条件的数组就可以了
你可以在CodePen在线运行一下