el-table filter 实现多字段筛选联动功能

1、按照el-table的filter使用方法绑定所有支持筛选的列，利用changeKey触发表格数据的变动，利用deptChangeKey、applyUserChangeKey触发过滤器的变动

      <el-table ref="longProcessTable" :key="changeKey" @filter-change="tableFilter" :class="isFilter ? 'filter-table long-process-table-white' : 'long-process-table-white'" :data="longProcessList">
        <el-table-column prop="applyUser" label="申请人" :key="applyUserChangeKey" :filters="applyUserFilters" :filter-multiple="true" column-key="applyUser"></el-table-column>
        <el-table-column prop="dept" label="归属部门" :key="deptChangeKey" :filters="deptFilters" :filter-multiple="true" column-key="dept"></el-table-column>
      </el-table>

2、在查询数据后，暂存查询到的数据并生成初始的筛选过滤器

    // 以下get调用方式仅供参考，可以根据你的实际使用情况进行修改
    // 关键点在于你接口调用成功后，需要将数据赋值到longProcessList中
    this.$axios.get('xxxxx').then(res=> {
        this.longProcessList = body.dataList
        // 将查询的数据暂存起来作为中间态
        this.tempLongProcessList = this.longProcessList
        // 根据查询后的数据生成初始筛选过滤器
        this.getFiltersData(this.longProcessList, 'deptFilters', 'dept')
        this.getFiltersData(this.longProcessList, 'applyUserFilters', 'applyUser')
    })

3、 封装的filter-change绑定的tableFilter函数

      tableFilter (filters) {
        console.log('filters', filters)
        switch (Object.keys(filters)[0]) { // 根据过滤器filter传的column-key来判断谁调用commonFilter方法
          case 'applyUser': this.commonFilter('applyUser', filters)
          break
          case 'dept': this.commonFilter('dept', filters)
          break
        }
      },
      commonFilter (type, filters) {
        let key
        for (let index in filters) { // filters是筛选对应的column-key的值
          key = index
        }
        this[key] = filters[key]
        console.log('this[key]', this[key],  this[key].length)
        if (this[key].length > 0) { // T1 如果勾选了筛选值
          this.isFilter = true
          this.longProcessList.forEach(item => { // T1.1 根据筛选值到表格渲染的数据中进行匹配 将匹配成功的数据push到resultDataArray中
            this[key].forEach(ele => {
              if (item[type] === ele) {this.resultDataArray.push(item)}
            })
          })
          console.log('this.resultDataArray', this.resultDataArray)
          this.longProcessList = this.resultDataArray // T1.2 将resultDataArray渲染到表格
          this.changeKey = !this.changeKey // T1.3 通过控制表格的key触发表格的数据变化
          this.getFiltersData(this.longProcessList, 'applyUserFilters', 'applyUser') // T1.4 根据表格展示的数据重新匹配新的筛选项
          this.getFiltersData(this.longProcessList, 'deptFilters', 'dept') // T1.5 根据表格展示的数据重新匹配新的筛选项
        } else { // T2没有勾选筛选值直接点击确定，或者使用了重置功能
          this.isFilter = false
          this.longProcessList = this.tempLongProcessList // T2.1恢复最开始的默认数据
          this.getFiltersData(this.longProcessList, 'applyUserFilters', 'applyUser') // T2.2 根据表格展示的默认数据重新匹配新的筛选项
          this.getFiltersData(this.longProcessList, 'deptFilters', 'dept') // T2.3 根据表格展示的默认数据重新匹配新的筛选项
        }
        this.resultDataArray = [] // 每一次筛选结束都要清空resultDataArray，否则会导致resultDataArray中数据叠加
      },
      // 生成filters过滤器数据
      getFiltersData (arr, filterName, type) {
        this[filterName] = []
        arr.forEach(item => {
          this[filterName].push({text: item[type], value: item[type]})
        })
        this[filterName] = this.uniqueObjectInArray(this[filterName])
      },
      // 数组中的对象去重
      uniqueObjectInArray (arr) {
        let map = new Map()
        return arr.filter((item) => !map.has(item.value) && map.set(item.value, item))
      },

3、需要watch监听两个筛选过滤器，并利用key值（deptChangeKey、applyUserChangeKey）的变动，才能触发过滤器的实时更新

    watch: {
      deptFilters (nv, ov) {
        this.deptFilters = nv
        this.deptChangeKey = !this.deptChangeKey
      },
      applyUserFilters (nv, ov) {
        this.applyUserFilters = nv
        this.applyUserChangeKey = !this.applyUserChangeKey
      }
    }

4、问题集合

（a）由于key的改变会使表格和过滤器不断刷新，从而导致进行了筛选操作但是筛选器图标并未着色，这就用到了el-table头部使用的isFilter。

isFilter为true则进行了筛选操作，table就多一个类名filter-table（类样式如下）；isFilter为false则未进行筛选操作或已重置则table保留初始类名long-process-table-white。完美解决着色问题！

      .filter-table th .bk-table-column-filter-trigger {
        color: #63656e;
      }

（b）如果想要通过点击查询/重置/页码分页等来实现过滤器的筛选值重置，可利用table的ref属性，代码如下 ：（这个问题若没有出现则不需要使用此代码）

        if (this.$refs.longProcessTable) {
          this.applyUser = []
          this.dept = []
          this.isFilter = false
        }