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动态生成列(列数不固定))