vue-table-with-tree-grid实现树形表格+操作

首先，先用npm安装vue-table-with-tree-grid，代码如下，

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

然后在main.js中引入并使用

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

然后效果图和代码如下

<template><div class="wrap"><zk-tableref="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"><spanstyle="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></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:'男'},],}},methods:{pre_edit(e){this.$message.success('编辑')},del(e){this.$message.success('删除')},pre_add(e){this.$message.success('添加')}}};</script><style lang="less" scoped>.wrap {font-size: 30px;/deep/ .zk-table {.zk-table__header-wrapper {thead {.zk-table__header-row {height: 48px;color: #515a6e;font-size: 16px;th {&:first-child {> div {padding-left: 10px;}}&:nth-child(n + 2) {> div {padding: 0;// &:not(1){text-align: center;// }}}}}}}.zk-table__body-wrapper {.zk-table__body {tbody {.zk-table--empty-row {height: 48px;}.zk-table__body-row {font-size: 14px;color: #515a6e;td {> div {span {display: inline-block;height: 40px;// line-height: 40px;display: flex;align-items: center;.zk-table--tree-icon {color: grey;font-size: 16px;// margin-top: 5px;}}}&:first-child {.zk-table__cell-inner {padding: 6px 6px;.zk-table--level-2-cell {margin-left: 10px !important;}.zk-table--level-3-cell {margin-left: 20px !important;}.zk-table--level-4-cell {margin-left: 30px !important;}}}&:not(1) {.zk-table__cell-inner {text-align: center;span {margin-left: 0;}}}&:last-child {> div {padding: 6px 23px;margin: 0 auto;// width: 150px;display: flex;justify-content: flex-end;color: #2d8cf0;span {margin-left: 10px;&:first-child {margin-left: 0;}&:nth-child(odd) {cursor: pointer;}}}}}}}}}}}</style>