element+vue 动态多表头与动态插槽

一、需求

满足用户自行配置表格，减少对系统代码维护量。

二、参考文章

https://blog.csdn.net/weixin_...

三、效果

表头json：

说明：scope（字段名可另取）为是否对该列开启插槽。propChildren为多级表头。

   
tableHead: [{
    key: '1',
    label: '日期',
    prop: 'date',
    width: '100',
    headerAlign: 'center',
    align: 'center',
    scope: false,
    sortable: true
  },
  {
    key: '2',
    label: '姓名',
    prop: 'name',
    width: '100',
    headerAlign: 'center',
    align: 'center',
    scope: false,
    sortable: false
  },
  {
    key: '3',
    label: '分析情况',
    prop: 'analysis',
    width: '100',
    headerAlign: 'center',
    propChildren: [{
      key: '31',
      label: '同比',
      prop: 'TB',
      width: '100',
      headerAlign: 'center',
      align: 'center',
      scope: true,
      sortable: true
    },
    {
      key: '32',
      label: '环比',
      prop: 'HB',
      width: '100',
      headerAlign: 'center',
      align: 'center',
      scope: true,
      sortable: true
    },]
  },
  {
    key: '4',
    label: '金额',
    prop: 'price',
    width: '100',
    headerAlign: 'center',
    align: 'right',
    scope: false,
    sortable: true
  },
  {
    key: '5',
    label: '地址',
    prop: 'address',
    width: '',
    headerAlign: 'left',
    align: 'left',
    scope: false,
    sortable: false
  }
  ],

四、全部代码