vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查

以下代码可以直接复制使用

一、情景： 列表是一个树状表格，可以无限添加下级，以及对列表的某一行进行增删改查（目前查没有写）。

原博链接

二、本篇是在原博主的代码基础上添加了部分功能。
功能1： 给树状表格添加虚线部分，可以更清楚树节点层级关系
功能2： 某行数据可以直接输入框编辑，也可以点击编辑按钮打开弹框编辑
功能3： 我这里树状节点一共有三种：
–①顶级根节点first： 只会有最外层一个 默认就有的 可以添加下级【夹】、【页】节点
–②中间夹节点middle： 通过点击【夹】节点按钮添加来的，可以继续添加下级【夹】、【页】
–③末梢页节点last： 不会再有下级。只有它才有数据展示
–总结就是 中间的【夹】可以无限添加下级，【页】就是末梢节点不能添加下级。每行的数据有个字段farOrSon来判断是属于什么节点。然后展示对应的图标。

三、部分代码详解：
–①功能其实还是使用element树形数据与懒加载，不过原博主写的更详细、功能更全，感谢！

–②表格的ref值cimsDictTable是只能给一个表格设置，否则会造成错误

–③树状表格自动展开属性是 default-expand-all ，去掉这个属性就是默认关闭的
–④:tree-props="{children:‘childNode’}" 这个childNode是你自己表格的树节点嵌套的那个字段；我的数据结构就是，childNode数组有值就是有下级，strObj有值就是右边的输入框数字。然后我的数据要求是childNode有值既有下级时候，strObj就是null。相反的strObj有值时候，childNode就是[]。所以你看到我的，【夹】都是没数据，【页】才是有数据的。如果你的要求是【夹】和【页】都有数据，既列表每行都有数据。那么你的strObj就要一直有值。
–⑤我的表格是多级表头，就是在 el-table-column 里面嵌套 el-table-column，具体看这个介绍，无论单级多级，其实数据结构是一样的对象数组，一行数据就是一个对象。
–⑥目前我的添加【夹】、【页】都是直接就加了一行，只有编辑是通过弹框修改。其实添加也可以使用这个弹框来做，逻辑可以参照编辑的。既添加记住是添加在哪个id数据下，点击缺点后，递归遍历找到这个数据将弹框值赋值给它修改既可以。
–⑦目前条件这行是设置了取列表剩余宽度。其实也可以给这列设置自适用撑开的宽度，看这篇自适应展开宽度
–⑧虚线部分是我自己计算写的样式，搜索scope.row.level这个代码就可以看到逻辑。
–⑧①首先是先计算每个行嵌套的层级level，例如【9527】这个就是嵌套了3层，就有三个竖着的虚线，遍历生成三个间距是16px的竖虚线；但是这三条虚线有可能前面的1、2条需要根据delItemFlag删除，然后虚线上移高度一半。这样你看到的一条条很长的竖线，其实是每行的竖线链接在一起形成的。
–⑧②行高时候，当前行的虚线也会多出来一截，故需要给每层嵌套的最后一行多设置个白色竖线，去遮挡多余的一截
–⑧③最后给每行设置横线虚线即可
下图就是设置虚线遇到的问题，不过目前已经解决了

以下代码可直接复制使用