树形表格组件vue-table-with-tree-grid的使用

1. 假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。
   
   npm网址：https://blog.csdn.net/Sky_fy_1314/article/details/107383695
   github案例：
   https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue

安装

如果你是使用 vue create my-project 搭建项目，使用时操作如下。

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

在需要用到的文件当中导入vue-table-with-tree-grid

import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)

使用组件展示分类数据

<!-- 分类表格
:data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框)
:expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头)
border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮) -->
    
<tree-table :data="cateList" :columns="columns" :selection-type="false"
:expand-type="false" show-index index-text="#" border :show-row-hover="false">
 
</tree-table>

然后效果图和代码如下

<template>
  <div class="main">
    <el-card class="box-card">
        <div class="header">
          <zk-table
          ref="table"
          :data="data1"
          :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"
          sum-text="sum"
          index-text="#"
        >
          <template slot="action" scope="scope">
            <span
              style="color:#2d8cf0;"
             
              @click="pre_add(scope.row)"
              >添加</span
            >
            <span>|</span>
            <span @click="pre_edit(scope.row)">修改</span>
            <span>|</span>

            <span @click="del(scope.row)">删除</span>
          </template>
        </zk-table>
        </div>
        <div class="cont"></div>
        <div class="footer"></div>
    </el-card>
  </div>
</template>

<script>
export default {
data(){
    return{
      props: {
        stripe: false,
        border: true,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false,//展示索引头
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false
      },
      columns:[
        {label: "姓名", align: "left", prop: "name", tree: true },
        {label: "序号", align: "center", prop: "id",  },
        {label: "年龄", align: "center", prop: "age", },
        {label: "性别", align: "center", prop: "sex",  },
        {
          label: "操作",
          align: "center",
          prop: "action",
          template: "action",
          type: "template",
          width: "180px"
        }
      ],
      data1: [
        {
          id:1,
          name:'Jack',
          age:'17',
          sex:'男',
          children:[
            {
              id:12,
              name:'Jack1',
              age:'12',
              sex:'女',
              children:[
                {
                  id:13,
                  name:'Jack10',
                  age:'17',
                  sex:'男'
                },
              ]
            }
          ]
        },
        {
          id:2,
          name:'Jack2',
          age:'17',
          sex:'男'
        },{
          id:3,
          name:'Jack3',
          age:'17',
          sex:'男'
        },{
          id:4,
          name:'Jack4',
          age:'17',
          sex:'男'
        },{
          id:5,
          name:'Jack5',
          age:'17',
          sex:'男'
        },{
          id:6,
          name:'Jack6',
          age:'17',
          sex:'男'
        },{
          id:7,
          name:'Jack7',
          age:'17',
          sex:'男'
        },{
          id:8,
          name:'Jack8',
          age:'17',
          sex:'男'
        },{
          id:9,
          name:'Jack9',
          age:'17',
          sex:'男'
        },
      ],
    }
},
created(){},
methods:{
    pre_edit(e){
      this.$message.success('编辑')
    },
    del(e){
      this.$message.success('删除')
    },
    pre_add(e){
      this.$message.success('添加')}}
}
</script>

<style lang="scss" scoped>
.main {
  .box-card {
    height: 600px;
}

}
</style>