表格树

例子

表格树 - 图1

传入option配置属性即可,expandAll是否全部展开,columns数据列,data为数据,同时还支持自定义列,具体看avue-cli的demo

  1.  <avue-tree-table :option="option"></avue-tree-table>
  3. <script>
  4. export default {
  5.     data () {
  6.     return {
  7.       option: {
  8.         expandAll: false,
  9.         columns: [
  10.           {
  11.             text: '事件',
  12.             value: 'event',
  13.             width: 200
  14.           },
  15.           {
  16.             text: 'ID',
  17.             value: 'id',
  18.             type:'dic',
  19.             dicData:[{
  20.               label:'零',
  21.               value:0
  22.             },{
  23.               label:'一',
  24.               value:1
  25.             },{
  26.               label:'二',
  27.               value:2,
  28.             }]
  29.           },
  30.           {
  31.             text: '时间线',
  32.             value: 'timeLine'
  33.           },
  34.           {
  35.             text: '备注',
  36.             value: 'comment'
  37.           }
  38.         ],
  39.         data: [
  40.           {
  41.             id: 0,
  42.             event: '事件1',
  43.             timeLine: 50,
  44.             comment: '无'
  45.           },
  46.           {
  47.             id: 1,
  48.             event: '事件1',
  49.             timeLine: 100,
  50.             comment: '无',
  51.             children: [
  52.               {
  53.                 id: 2,
  54.                 event: '事件2',
  55.                 timeLine: 10,
  56.                 comment: '无'
  57.               },
  58.               {
  59.                 id: 3,
  60.                 event: '事件3',
  61.                 timeLine: 90,
  62.                 comment: '无',
  63.                 children: [
  64.                   {
  65.                     id: 4,
  66.                     event: '事件4',
  67.                     timeLine: 5,
  68.                     comment: '无'
  69.                   },
  70.                   {
  71.                     id: 5,
  72.                     event: '事件5',
  73.                     timeLine: 10,
  74.                     comment: '无'
  75.                   },
  76.                   {
  77.                     id: 6,
  78.                     event: '事件6',
  79.                     timeLine: 75,
  80.                     comment: '无',
  81.                     children: [
  82.                       {
  83.                         id: 7,
  84.                         event: '事件7',
  85.                         timeLine: 50,
  86.                         comment: '无',
  87.                         children: [
  88.                           {
  89.                             id: 71,
  90.                             event: '事件71',
  91.                             timeLine: 25,
  92.                             comment: 'xx'
  93.                           },
  94.                           {
  95.                             id: 72,
  96.                             event: '事件72',
  97.                             timeLine: 5,
  98.                             comment: 'xx'
  99.                           },
  100.                           {
  101.                             id: 73,
  102.                             event: '事件73',
  103.                             timeLine: 20,
  104.                             comment: 'xx'
  105.                           }
  106.                         ]
  107.                       },
  108.                       {
  109.                         id: 8,
  110.                         event: '事件8',
  111.                         timeLine: 25,
  112.                         comment: '无'
  113.                       }
  114.                     ]
  115.                   }
  116.                 ]
  117.               }
  118.             ]
  119.           }
  120.         ]
  121.       }
  122.     }
  123.   }
  124. }
  125. </script>