vue element-ui el-table 表头筛选 配合接口数据渲染/以及多个筛选条件的情况

一、table设置监听事件（@filter-change）、想要筛选的列设置过滤条件（:filters）

 <el-table
            :data="columns"
            border
            @filter-change="filterHandler"  //监听事件
            style="width: 100%"
            max-height="500"
            :row-style="{ height: '55px' }"
          >
            <el-table-column
              prop="datasetUrl"
              label="数据集"
              :filters="tableDataFilter1"   //过滤条件1
              :column-key="columnKey[0]"  //每个筛选条件的标识
            />
            <el-table-column prop="type" label="特征角色" 
            :filters="tableDataFilter2"   //过滤条件2
            :column-key="columnKey[1]"  //每个筛选条件的标识
            />
            </table>

二、data中对过滤条件、条件标识的设置：

 columnKey:["datasetName","role"],//表头筛选 各列的标识
 tableDataFilter1: [],//表头筛选-筛选框内容1（动态写法，筛选框内容从后端获取）
      tableDataFilter2: [ //表头筛选-筛选框内容2  （前端写死筛选条件）
       {
    
    
          value: 1,
          text: "ID",
        },
        {
    
    
          value: 2,
          text: "自变量",
        },
        {
    
    
          value: 3,
          text: "目标变量",
        },
        {
    
    
          value: 4,
          text: "时间变量",
        },
      ],
       selDatasetName: [], //表头筛选-1 数据集合
      selRole: [], //表头筛选-2 数据集合

三、监听方法

 //表头筛选 table监听事件
    filterHandler(val) {
    
    
       //val:{key:[]} key就是上边筛选列标识数组设置的内容，该列选了几个条件，数组内就有几项
      for (const key in val) {
    
    
        if(key == "datasetName"){
    
    
            this.selDatasetName = val[key];
        }else if(key == "role"){
    
    
           this.selRole = val[key];
        }
        
      }
        this.pageNo = 1,
        this.display(); //获取数据的接口
    },

四、效果

选好条件点击筛选即可配合后端进行数据筛选。