vue element-ui动态生成table表头和数据

html块

<div class="comtable">
        <!-- <div v-if="total == 0" class="common-animate">
        <lottie class="inner" :options="{
            animationData: AnimNoDataNew,
            loop: true,
            speed: 5,
            autoplay: true,
            renderer: 'svg',
          }" />
        <span class="noDataText">暂无数据</span>
      </div> -->
      <span class="deviceIds-icon">
        <span class="split-line"></span>
        <span @click="showSelection" id="deviceIds">
          <svg-icon icon-class="shezhi" class="device-icon"></svg-icon>
        </span>
      </span>
      <el-table class="fixedtableHeight" v-loading="listLoading" ref="table" :data="showList"  stripe tooltip-effect="dark" style="width: 100% !important;margin-top:1%;" :header-cell-style="{background:'#e6e6e6'}" border>
        <el-table-column :label="item.propName" :property="item.prop" v-if= "tableft" v-for="item in tableColumnList" :key="item.prop" align="center">
              <template slot-scope="scope">
                    <span>{{scope.row[scope.column.property]}}</span>
              </template>
          </el-table-column>
      </el-table>
    </div>

js块

  //动态添加表头
    queryFn() {
      // 调用后台接口获取tableColumnList和dataList的方法写在这里
      // getData().then(response =>{
      //   this.tableColumnList = response.data.tableColumnList
      //   this.dataList = response.data.dataList
      // })
      this.showList = this.dataList;
    },
    clearQuery() {
      this.query.name = "";
      this.queryFn();
    },
    menuChange(item) {
      this.tableft = false;
      // 注意  我这里都用的假数据，要从后台获取tableColumnList和dataList的时候
      //，每一次调用menuChange都要重新获取tableColumnList和dataList，保证属性和数据是对应的
      let flag = true;
      for (var i = 0; i < this.checkArr.length; i++) {
        if (this.checkArr[i] === item.propName) {
          flag = false;
          this.$nextTick(function () {
            setTimeout((_) => {
              this.tableft = true;
              this.$refs.table.doLayout();
            }, 100);
          });
          break;
        }
      }
      if (!flag) {
        this.tableColumnList.push(item);
        this.$nextTick((_) => {
          this.tableft = true;
        });
      }
      if (flag) {
        Array.prototype.contains = function (obj) {
          var j = this.length;
          while (j--) {
            if (this[j] === obj) {
              return j; // 返回的这个 i 就是元素的索引下标，
            }
          }
          return false;
        };
        this.tableColumnList.splice(this.tableColumnList.contains(item), 1);
        this.$nextTick((_) => {
          this.tableft = true;
        });
      }
    },

造数据：

 // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口获取tableColumnList，注意数据格式
      tableColumnList: [
        { prop: "id", propName: "编号" },
        { prop: "name", propName: "名字" },
        { prop: "age", propName: "保质期" },
        { prop: "remark", propName: "特点" },
      ],
      // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据
      dataList: [
        {
          id: "100001",
          name: "小红萝卜",
          age: "2年",
          remark: "适合油炸",
          country: "中国",
          address: "广东省深圳市",
        },
        {
          id: "100002",
          name: "萝卜妹",
          age: "2年",
          remark: "适合水煮",
          country: "美国",
          address: "硅谷",
        },
        {
          id: "100003",
          name: "胖萝卜头",
          age: "1年",
          remark: "适合玩儿",
          country: "泰国",
          address: "清迈",
        },
        {
          id: "100004",
          name: "萝卜酱",
          age: "4年",
          remark: "适合吃火锅",
          country: "韩国",
          address: "首尔",
        },
      ],
      optionalColumnList: [
        { prop: "country", propName: "出口国家" },
        { prop: "address", propName: "零售点" },
      ],

      checkArr: [],
      list: [],