vue实现树状表格效果

本文实例为大家分享了vue实现树状表格的具体代码，供大家参考，具体内容如下

1. 初始化配置

安装模块：

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

main.js 文件

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

2. 使用

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

3. 效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。