解决element-ui中的table标头的筛选功能（多数据-数组中存放对象）_el-table 表头筛选项有多项

解决element-ui中的table标头的筛选功能（多数据-数组中存放对象）

需求介绍：需要将表格中所有的数据渲染到标头，并进行筛选。所有的数据都是通过后端请求回来的。
1

效果图
代码

 <el-table class="content"
    ref="filterTable"
    :data="$store.state.tableData "
    :default-sort = "{prop: 'dtime', order: 'descending'}"
    highlight-current-row
    @row-click="pitchOn"
    style="width: 100%; ">
        <el-table-column
          prop="flowno"
          label="交易流水"
          :filters="this.tableListFlowno"
          :filter-method="filterFlowno"
          filter-placement="bottom-end"
          sortable
          >
    </el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 data: () => {
   // 过滤
    return {
      tableListFlowno:[],   //交易流水
      }
  },
1
2
3
4
5
6

  // 筛选
      filterFlowno (value, row) {
        return row.flowno === value
        },
1
2
3
4

 methods:{
   //公共方法
    filterPublic(arr,list,tableList){
          if(!arr.includes(tableList)){
            list.push({
                  'text':tableList,
                  'value':tableList,
              })
                arr.push(tableList)
             }       
    },
    // 请求所有交易流水
    filterList(){
       this.tableListFlowno=[]
     				 let arr1 = []
      				 for(let i = 0;i <res.data.errMsg.length;i++){      
                        this.filterPublic(arr1,this.tableListFlowno,res.data.errMsg[i].flowno)
                  	}
   }          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

因为过滤的是数组中的对象，没有比较。所以另建一个空数组，用来比较里面是否已经存在参数