• 表格树
    • 普通用法

    表格树

    配置tree为true即可激活树姓表格

    TIP

    1.0.6+

    普通用法

    表格树 - 图1

    1. <avue-crud :option="option" :data="data" >
    2.   <template slot="icon" slot-scope="scope">
    3.     <i :class="scope.row.icon" style="font-size:24px"></i>
    4.   </template>
    5.   <template slot="menu" slot-scope="scope">
    6.    <el-button :size="scope.size" :type="scope.type">自定义内容</el-button>
    7.   </template>
    8. </avue-crud>
    9. <script>
    10. export default {
    11.   data(){
    12.     return {
    13.        data: [
    14.         {
    15.           id: 0,
    16.           event: '事件1',
    17.           timeLine: 50,
    18.           icon: 'el-icon-time',
    19.           comment: '无'
    20.         },
    21.         {
    22.           id: 1,
    23.           event: '事件1',
    24.           icon: 'el-icon-bell',
    25.           timeLine: 100,
    26.           comment: '无',
    27.           children: [
    28.             {
    29.               id: 2,
    30.               event: '事件2',
    31.               icon: 'el-icon-star-on',
    32.               timeLine: 10,
    33.               comment: '无'
    34.             },
    35.             {
    36.               id: 3,
    37.               event: '事件3',
    38.               timeLine: 90,
    39.               comment: '无',
    40.               children: [
    41.                 {
    42.                   id: 4,
    43.                   event: '事件4',
    44.                   timeLine: 5,
    45.                   comment: '无'
    46.                 },
    47.                 {
    48.                   id: 5,
    49.                   event: '事件5',
    50.                   timeLine: 10,
    51.                   comment: '无'
    52.                 },
    53.                 {
    54.                   id: 6,
    55.                   event: '事件6',
    56.                   timeLine: 75,
    57.                   comment: '无',
    58.                   children: [
    59.                     {
    60.                       id: 7,
    61.                       event: '事件7',
    62.                       timeLine: 50,
    63.                       comment: '无',
    64.                       children: [
    65.                         {
    66.                           id: 71,
    67.                           event: '事件71',
    68.                           timeLine: 25,
    69.                           comment: 'xx'
    70.                         },
    71.                         {
    72.                           id: 72,
    73.                           event: '事件72',
    74.                           timeLine: 5,
    75.                           comment: 'xx'
    76.                         },
    77.                         {
    78.                           id: 73,
    79.                           event: '事件73',
    80.                           timeLine: 20,
    81.                           comment: 'xx'
    82.                         }
    83.                       ]
    84.                     },
    85.                     {
    86.                       id: 8,
    87.                       event: '事件8',
    88.                       timeLine: 25,
    89.                       comment: '无'
    90.                     }
    91.                   ]
    92.                 }
    93.               ]
    94.             }
    95.           ]
    96.         }
    97.       ],
    98.       option: {
    99.         expandAll: false,
    100.         expandLevel: 2,
    101.         border: true,
    102.         index: true,
    103.         tree:true,
    104.         column: [
    105.           {
    106.             label: '事件',
    107.             prop: 'event',
    108.             align: 'left',
    109.             width: 200
    110.           },
    111.           {
    112.             label: 'ID',
    113.             prop: 'id',
    114.             dicData: [{
    115.               label: '零',
    116.               value: 0
    117.             }, {
    118.               label: '一',
    119.               value: 1
    120.             }, {
    121.               label: '二',
    122.               value: 2,
    123.             }]
    124.           },
    125.           {
    126.             label: '时间线',
    127.             prop: 'timeLine'
    128.           },
    129.           {
    130.             label: '自定义图标',
    131.             prop: 'icon',
    132.             slot: true,
    133.           },
    134.           {
    135.             label: '备注',
    136.             prop: 'comment'
    137.           }
    138.         ],
    139.       }
    140.   }
    141.   }
    142. }
    143. </script>