element ui根据下拉框值动态显示table的表头列

data里定义一个对象，key是表头名称，value是下拉框的选项，代表选择哪一项的时候展示这个表头字段。

const colList = {
  表头列1: ['选项1', ],
  表头列2: ['选项1', '选项2', '选项3', '选项4'],
  表头列3: ['选项2', '选项3', '选项4'],
  表头列4: ['选项1', '选项2'],
 }

data里声明currentEventName: ‘当前选择项’

在table里定义表头：

<el-table-column v-if="showCol('表头名称')" key="1" label="表头1">
        <template slot-scope="scope">
          {{ scope.row.speed }}
        </template>
 </el-table-column>

定义方法showCol，item存放该选项的表头，如果该选项存在并且它的value包含当前的选项，return ture;v-if就成立，此列就显示。

showCol(key) {
      const item = colList[key];
      return item && item.includes(this.currentEventName);
}

动态调用接口：
定义eventArr数组，name存放选项，fn存放接口方法

eventArr: [
        { name: '选项1', fn: 接口1 },
        { name: '选项2', fn: 接口2 },
        { name: '选项3', fn: 接口3 },
      ],

定义computed存放当前接口的方法：

  computed: {
    // 对应接口
    currentApi() {
      return this.eventArr.find(a => a.name ==this.currentEventName).fn;
    }
  },

调用接口获取数据：

  async getList() {
      const res = await this.currentApi(this.queryModel);
      this.list = res.Data;
},