复杂表头

TIP

1.0.9+

  • 只要在配置中添加children层级嵌套即可

普通用法

复杂表头 - 图1

  2. <avue-crud :option="option" :data="data" ></avue-crud>
  3. <script>
  4. export default {
  5.     data() {
  6.       return {
  7.         option: {
  8.           border: true,
  9.           index: true,
  10.           expandLevel: 3,
  11.           headerAlign: 'center',
  12.           align: 'center',
  13.           tree: true,
  14.           labelWidth: 100,
  15.           column: [{
  16.             label: '姓名',
  17.             prop: 'name',
  18.             width:140,
  19.           }, {
  20.             label: '性别1',
  21.             prop: 'sex',
  22.           },
  23.           {
  24.             label: '自定义图标',
  25.             prop: 'icon',
  26.             type: "icon-select",
  27.             iconList: [{
  28.               label: '基本图表',
  29.               list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
  30.             }]
  31.           }, {
  32.             label: '复杂表头',
  33.             children: [{
  34.               label: '信息',
  35.               children: [{
  36.                 label: '年龄',
  37.                 prop: 'age'
  38.               }, {
  39.                 label: '手机号',
  40.                 prop: 'phone',
  41.               }]
  42.             }, {
  43.               label: '级别',
  44.               prop: 'grade',
  45.               type: 'select',
  46.               dicData: [{
  47.                 label: '测试',
  48.                 value: 1
  49.               }]
  50.             }]
  51.           }, {
  52.             label: '测试',
  53.             prop: 'test',
  54.           },
  55.           {
  56.             label: '手机信息1',
  57.             prop: 'phone1'
  58.           }],
  59.         },
  60.         data: [{
  61.           name: '张三',
  62.           age: 14,
  63.           grade: 1,
  64.           phone1: '17547400800',
  65.           phone: '17547400800',
  66.           icon: 'el-icon-time',
  67.           test: 1,
  68.           sex: '男'
  69.         }, {
  70.           name: '王五',
  71.           age: 10,
  72.           grade: 1,
  73.           test: 1,
  74.           sex: '女',
  75.           icon: 'el-icon-star-on',
  76.           phone1: '17547400800',
  77.           phone: '17547400800'
  78.         }]
  79.       }
  80.     }
  81. }
  82. </script>