• 复杂表头
    • 普通用法

    复杂表头

    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>