一，el-tabe的表格封装多级表头

浅谈一下，我们公司是自己封装的表格，在el-table的基础上进行封装使用的，因此需要一个表头的label的封装和展示 下面是封装的数据；

export const double = [{
    type: 'index',
    label: '序号',
    key: '序号',
    showOverflowTooltip: true,
    width: 65,
    align: 'center',
  },
{
    label: '石油 煤炭及其他燃料加工业',
    align: 'center',
    width: 260,
    showOverflowTooltip: true,
    children: [{
        key: 'tradeCodeRate0',
        label: '占比',
        align: 'center',
        width: 120,
        showOverflowTooltip: true,
      },
      {
        key: 'tradeConsNum0',
        label: '户数',
        align: 'center',
        width: 120,
        showOverflowTooltip: true,
      }
    ]
  },
  {
    label: '化学原料和化学制品制造业',
    width: 220,
    align: 'center',
    showOverflowTooltip: true,
    children: [{
        key: 'tradeCodeRate1',
        label: '占比',
        align: 'center',
        width: 120,
        showOverflowTooltip: true,
      },
      {
        key: 'tradeConsNum1',
        label: '户数',
        align: 'center',
        width: 120,
        showOverflowTooltip: true,
      }
    ]
  },

  {
    label: '黑色金属冶炼和压延加工业',
    width: 260,
    align: 'center',
    showOverflowTooltip: true,
    children: [{
        key: 'tradeCodeRate3',
        label: '占比',
        align: 'center',
        width: 120,
        showOverflowTooltip: true,
      },
      {
        key: 'tradeConsNum3',
        label: '户数',
        align: 'center',
        width: 120,
        showOverflowTooltip: true,
      }
    ]
  },
]

这个是多级表头的展示，在js里面也是需要处理一下的

方法中methods：{
    setColSpan() {
      // console.log(document.getElementsByClassName("el-table__header"))
      // 获取表头的所有单元格
      var x = 
      document.getElementsByClassName('el-table__header')[0].rows[0].cells;
      // // 将第二列表头单元格的colSpan设为2
      x[7].colSpan = 2;
      x[10].colSpan = 2;
      x[14].colSpan = 2;
    },
    }

因为是进入此页面就要显示，因此需要处理一下此函数

  mounted() {
    this.$nextTick(function () {
      this.setColSpan();
    });
  },

这样一个多级表头就可以正常显示了

关于后台获取的数据格式，我获取到的是数组嵌套数组中的数据 类似于这样

res.data.list = {
 a:''，
 b:'',
 c:'',
 info:[
   {
     new:'',
     name:"",
   },
  {
     new:'',
     name:"",
   },
 {
     new:'',
     name:"",
   },
 ]
}

因此只需要把数组中的数组展开放到第一层数组就可以了，并且由于字段名相同，只好另起一个名字进行展示数据。 需要把获取的数据进行以下处理即可

     this. tableData = [],
      res.data.list = [上述数组格式即可],
     this.tableData = res.data.list.map((item) => {
            let obj = {};
            let tradeInfoList = item.Info;
            Info.forEach((v, index) => {
              obj['new' + index] = v.new + '%';
              obj['name' + index] = v.name;
            });
            return {
              ...item,
              ...obj,
            };
          });
        // console.log(this.tableData);

以上处理之后，数组中既可以保留原数组中的数据，又新增了需要的数据，即把数据展开，无需进行push或者扩展运算就可以得到想要的数据。

仅供参考~~~~~