下拉中的选项（包括全部，多选等）与表格中的列关联

 <div class="search-box">
      <el-form class="search" :inline="true" label-width="90px">
        <el-form-item label="显示选择：">
          <el-select multiple collapse-tags v-model="selectedArray" @change="changeSelect" placeholder="请选择">
            <el-option :class="[
                { all: isIndeterminate === 'all' },
                { part: isIndeterminate === 'part' },
                { no: isIndeterminate === 'no' },
              ]" label="全选" value="0">
            </el-option>
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrapper-content flex-column">
      <el-table ref="multipleTable" :data="tableData" style="width: 100%">
        <el-table-column fixed label="序号" width="85" align="center" type="index" :key="1 + Math.random()" />
        <el-table-column fixed label="名称" width="270" :key="1 + Math.random()">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="代码" width="350" :key="2 + Math.random()">
        </el-table-column>
        <template v-for="(item,index) in tableColumn">
          <el-table-column :key="index + Math.random()" v-if="item.isShow" :prop="item.prop" :label="item.label">
          </el-table-column>
        </template>
        <el-table-column prop="address" label="名称1" width="270" :key="7 + Math.random()" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="名称1" width="550" :key="8 + Math.random()" show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="120px" :key="9 + Math.random()">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

data() {
    return {
      // 显示选择 -  下拉多选添加全选全不选部分选择
      isIndeterminate: false,
      checked: false,
      selectedArray: [],
      oldSelectArray: [],
      options: [
        {
          value: "1",
          label: "类型1",
        },
        {
          value: "2",
          label: "类型2",
        },
        {
          value: "3",
          label: "类别",
        },
        {
          value: "4",
          label: "状态",
        },
      ],
      // end
      // 表格
      tableData: [
        {
          id: "1",
          date: "通知",
          name: "2022-12-10 08:23",
          address: "通知通知通知通知通知通知通知通知通知通知通知通知通知通知",
          address1: "未读",
        },
        {
          id: "2",
          date: "通知",
          name: "2022-12-10 08:23",
          address: "通知通知通知通知通知通知通知通知通知通知通知通知通知通知",
          address1: "未读",
        },
      ],
      // 控制表格列显示
      tableColumn: [
        { label: "类型1", value: "1", prop: "address1", isShow: true },
        { label: "类型2", value: "2", prop: "address1", isShow: true },
        { label: "类别", value: "3", prop: "address1", isShow: true },
        { label: "状态", value: "4", prop: "address1", isShow: true },
      ],
    };
  },
  created() {
    // 设置多选下拉，一进页面就全部选中状态
    let arr = [];
    for (let i = 0; i < this.tableColumn.length; i++) {
      arr[i] = i.toString();
    }
    this.changeSelect(arr);
  },
  computed: {
    allChecked() {
      return this.options.length === this.selectedArray.length;
    },
  },
  beforeUpdate() {
    this.$nextTick(() => {
      //在数据加载完，重新渲染表格
      this.$refs["multipleTable"].doLayout();
    });
  },
  methods: {
    // 下拉多选添加全选全不选部分选择
    changeSelect(val) {
      console.log("dd:", val);
      let allValues = [];
      for (let item of this.options) {
        allValues.push(item.value);
      }
      allValues = ["0"].concat(allValues);
      const oldVal = this.oldSelectArray.concat([]);
      const oldInclude0 = oldVal.includes("0");
      const newInclude0 = val.includes("0");
      // 若是全部选择
      if (newInclude0) {
        this.selectedArray = allValues;
        this.isIndeterminate = "all";
      }
      if (oldInclude0 && !newInclude0) {
        this.selectedArray = [];
        this.isIndeterminate = "no";
      }
      if (oldInclude0 && newInclude0) {
        this.selectedArray = val;
        this.selectedArray = this.selectedArray.filter((d) => d !== "0");
        this.isIndeterminate = "part";
      }
      if (!oldInclude0 && !newInclude0) {
        if (val.length === allValues.length - 1) {
          this.selectedArray = ["0"].concat(val);
          this.isIndeterminate = "all";
        } else if (!val.length) {
          this.isIndeterminate = "";
        } else {
          this.isIndeterminate = "part";
        }
      }
      this.oldSelectArray = this.selectedArray;
      console.log("点击：", this.selectedArray);
    },
    // end
    // 搜索
    handleQuery() {
      // 控制表格中的列根据多选下拉的选择相应显示隐藏
      // 如果选中的selectedArray中有0，也就是全选了，那tableColumn中所有的就都是true
      if (this.selectedArray.find((ele) => ele === "0")) {
        this.tableColumn.forEach((ele) => {
          ele.isShow = true;
        });
      } else {
        this.tableColumn.forEach((ele) => {
          ele.isShow = false;
        });
        this.selectedArray.forEach((item) => {
          this.tableColumn.find((ele) => ele.value === item).isShow = true;
        });
      }
      console.log("选择：", this.tableColumn);
    },
    // 详情
    handleDetail() {},
  },