Vue element-ui el-table table header filter cooperates with interface data rendering/and multiple filter conditions

1. Set the listening event for table (@filter-change), and set the filter condition for the column you want to filter (: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>

2. Setting of filter conditions and condition identification in 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 数据集合

3. Monitoring method

 //表头筛选 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(); //获取数据的接口
    },

4. Effect

Select the conditions and click Filter to cooperate with the backend to filter data.