表格树

配置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>