vue实现树状表格效果

npm i vue-table-with-tree-grid -S

import ZkTable from 'vue-table-with-tree-grid'
Vue.component(ZkTable.name, ZkTable);

<template lang="html">
 <div id="example">
  <zk-table
    ref="table"
    index-text="#"
    :data="data"
    :columns="columns"
    :stripe="props.stripe"
    :border="props.border"
    :show-header="props.showHeader"
    :show-summary="props.showSummary"
    :show-row-hover="props.showRowHover"
    :show-index="props.showIndex"
    :tree-type="props.treeType"
    :is-fold="props.isFold"
    :expand-type="props.expandType"
    :selection-type="props.selectionType">

   <template slot="likes" scope="scope">
    {{ scope.row.likes.join(',') }}
   </template>
  </zk-table>
 </div>
</template>

<script>

 export default {
  name: 'example',

  data() {
   return {
    props: {
     stripe: false, // 是否显示间隔斑马纹
     border: true, // 是否显示纵向边框
     showHeader: true, // 是否显示表头
     showSummary: false, // 是否显示表尾合计行
     showRowHover: true, // 鼠标悬停时，是否高亮当前行
     showIndex: true, // 是否显示数据索引
     treeType: true, // 是否为树形表格
     isFold: true, // 树形表格中父级是否默认折叠
     expandType: false, // 是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)
     selectionType: false, // 是否为多选类型表格
    },
    data: [
     {
      name: 'Jack',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 10,
      children: [
       {
        name: 'Ashley',
        sex: 'female',
        likes: ['football', 'basketball'],
        score: 20,
        children: [
         {
          name: 'Ashley',
          sex: 'female',
          likes: ['football', 'basketball'],
          score: 20,
         },
         {
          name: 'Taki',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10,
          children: [
           {
            name: 'Ashley',
            sex: 'female',
            likes: ['football', 'basketball'],
            score: 20,
           },
           {
            name: 'Taki',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 10,
            children: [
             {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
             },
             {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
             },
            ],
           },
          ],
         },
        ],
       },
       {
        name: 'Taki',
        sex: 'male',
        likes: ['football', 'basketball'],
        score: 10,
       },
      ],
     },
     {
      name: 'Tom',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 20,
      children: [
       {
        name: 'Ashley',
        sex: 'female',
        likes: ['football', 'basketball'],
        score: 20,
        children: [
         {
          name: 'Ashley',
          sex: 'female',
          likes: ['football', 'basketball'],
          score: 20,
         },
         {
          name: 'Taki',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10,
         },
        ],
       },
       {
        name: 'Taki',
        sex: 'male',
        likes: ['football', 'basketball'],
        score: 10,
        children: [
         {
          name: 'Ashley',
          sex: 'female',
          likes: ['football', 'basketball'],
          score: 20,
         },
         {
          name: 'Taki',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10,
         },
        ],
       },
      ],
     },
     {
      name: 'Tom',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 20,
     },
     {
      name: 'Tom',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 20,
      children: [
       {
        name: 'Ashley',
        sex: 'female',
        likes: ['football', 'basketball'],
        score: 20,
       },
       {
        name: 'Taki',
        sex: 'male',
        likes: ['football', 'basketball'],
        score: 10,
       },
      ],
     },
    ],
    columns: [
     {
      label: 'name', // 列标题名称
      prop: 'name', // 对应列内容的属性名
      width: '400px', // 列宽度
     },
     {
      label: 'sex',
      prop: 'sex',
      minWidth: '50px',
     },
     {
      label: 'score',
      prop: 'score',
     },
     {
      label: 'likes',
      prop: 'likes',
      minWidth: '200px',
      type: 'template',
      template: 'likes', // 列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称
     },
    ],
   };
  },
 };
</script>

<style scoped lang="less">
 * {
  margin: 0;
  padding: 0;
 }
 .switch-list {
  margin: 20px 0;
  list-style: none;
  overflow: hidden;
 }
 .switch-item {
  margin: 20px;
  float: left;
 }
</style>