vue + el-table 对表头每个字段进行操作

一. 通过对表头的图标按钮点击, 然后操作当前列数据 , 如图:

el-select里的复选框,代码如下: 

data() { return {

 }} 

methods里的逻辑:

    /* -------------------& 表头功能操作 &---------------------- */
    popoverChange(event) {
      // console.log("event-##",event);
      this.getNumAndGroup({field:event});
      this.checkedCols = [];
    },
    // 全选操作
    handleAllPop(val) {
      let columnOptionKeys = [];
      this.tableHeaderList.forEach(item => {
        columnOptionKeys.push(item.FIELD);
      });
      this.checkedCols = val ? columnOptionKeys : [];
      this.isIndeterminatePop = false;
    },
    // 下拉框事件
    handleSelectChange(value) {
      let checkedCount = value.length;
      this.checkAllPop = checkedCount === this.tableHeaderList.length;
      this.isIndeterminatePop = checkedCount > 0 && checkedCount < this.tableHeaderList.length;
    },
    // 升序操作
    ascHandle(event,type) {
      this.formInfo.sort = '';
      this.formInfo.fieldName = event;
      if (type == 'asc') {
        this.querySummaryDataList(this.formInfo);
      }
    },
    // 降序操作
    descHandle(event,type) {
      this.formInfo.sort = 'desc';
      this.formInfo.fieldName = event;
      if (type == 'desc') {
        this.querySummaryDataList(this.formInfo);
      }
    },
    // 搜索查询
    queryContent(event) {
      this.formInfo[event] = this.checkedCols.toString();
      this.querySummaryDataList(this.formInfo);
    },