el-table动态生成列（列数不固定）

<el-table
        v-if="wideTable"
        v-loading="loading"
        :data="checkLogList"
        :render-header="labelHead"
        :border="true"
      >
        <el-table-column
          :label="item"
          v-for="(item, index) in header"
          :key="item"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-for="(item2, index2) in scope.row.countd"
              v-if="index2 == index"
            >
              {{ scope.row.countd[index2] }}
            </span>
            <span
              v-for="(item2, index2) in scope.row.countp"
              v-if="index2 == index"
            >
              {{ scope.row.countp[index2] }}
            </span>
            <span
              v-for="(item2, index2) in scope.row.principalPrice"
              v-if="index2 == index"
            >
              {{ scope.row.principalPrice[index2] }}
            </span>
          </template>
        </el-table-column>
      </el-table>

/** 查询列表 */
    getList(data) {
      this.loading = true;
      this.wideTable = true;
      this.header = [];
      this.checkLogList = [
        // { header: ["", "第一季度", "第二季度", "第三季度", "第四季度"] },
        { countd: ["户数", "1", "2", "3", "4"] },
        { countp: ["包数", "5", "6", "7", "8"] },
        { principalPrice: ["本金金额", "9", "10", "11", "12"] },
      ];
      this.header = ["", "第一季度", "第二季度", "第三季度", "第四季度"];
      this.loading = false;
    },
    labelHead(h, { column, index }) {
      //动态表头渲染
      //let l = column.label.length;
      //let f = 12; //每个字大小,其实是每个字的比例值,大概会比字体大小打差不多大
      //column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
      //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h("span", { class: "table-head", style: { width: "100%" } }, [
        column.label,
      ]);
    },

上面的代码就可以动态生成el-table

如果需要在head上面加图标，可以使用svg-icon加自定义图标

   renderHeader(h) {
      //   console.log("h=====", h)
      if (this.type) {
        return (
          <div style='display: flex;align-items: center;justify-content: center;cursor: pointer' onClick={() => this.clickReverse()}>
            <p style=''>年限</p>
            <svg-icon icon-class="icon_reorder_01" class="el-input__icon input-icon" />
          </div>
        )
      } else {
        return (
          <div style='display: flex;align-items: center;justify-content: center;cursor: pointer' onClick={() => this.clickReverse()}>
            <p style=''>年限</p>
            <svg-icon icon-class="icon_reorder_02" class="el-input__icon input-icon" />
          </div>
        )
      }
    },