开门见山看效果图，看是不是你想要的
vxe-table（先来看看这个强大组件是什么样子）
一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等…
git地址：vxe-table.
vxe-table官方文档：点击查看发现新大陆，建议收藏，留着备用.
组件中有详细的开发指南，其实不用做我过多的介绍，根据你的需求可以进行安装和使用！
但是呢，既然分享这个组件啦，那就顺便给大家展示一下在vue项目中使用的具体步骤吧，也算自己再学习学习！
vxe-table组件在vue中实现步骤
第一步：还是先安装
依赖库：vue 2.6+, xe-utils 2.4+
// npm安装 xe-utils 和 vxe-table npm install xe-utils vxe-table
第二步：在main.js中引入
import Vue from 'vue'import 'xe-utils'import VXETable from 'vxe-table'import 'vxe-table/lib/index.css'Vue.use(VXETable)// 给 vue 实例挂载全局窗口对象//如果用不到这个组件的弹窗可以不写，根据个人使用情况而定Vue.prototype.$XModal = VXETable.modal
第三步：在需要的组件中使用
<template><div ><vxe-toolbar><template v-slot:buttons><vxe-button @click="$refs.xTree.toggleTreeExpansion(tableData[0], true)">切换第一个</vxe-button><vxe-button @click="$refs.xTree.setTreeExpansion(tableData[2], true)">展开第三个</vxe-button><vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button><vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button></template></vxe-toolbar><vxe-tableresizableborderref="xTree":tree-config="{children: 'children'}":edit-config="{trigger: 'click', mode: 'row'}":checkbox-config="{labelField: 'id'}":data="tableData"><vxe-table-column type="checkbox" title="ID" tree-node></vxe-table-column><vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column><vxe-table-column field="size" title="Size" :edit-render="{name: 'input'}"></vxe-table-column><vxe-table-column field="type" title="Type" :edit-render="{name: 'input'}"></vxe-table-column><vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column></vxe-table></div></template><script>export default {data () {return {tableData: []}},created () {this.tableData = window.MOCK_TREE_DATA_LIST}}</script>
好了，这样你想要的树形可编辑表格就展示啦，如果你的项目有这中需求，可以试试！
