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

目录

• 一、需求
• 二、效果
• 三、全部代码

一、需求

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

二、效果

表头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
  }
  ],

三、全部代码

到此这篇关于vue + element动态多表头与动态插槽的文章就介绍到这了,更多相关vue + element动态多表头与动态插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！