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

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

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

原博链接

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

三、部分代码详解:
–①功能其实还是使用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删除,然后虚线上移高度一半。这样你看到的一条条很长的竖线,其实是每行的竖线链接在一起形成的。
–⑧②行高时候,当前行的虚线也会多出来一截,故需要给每层嵌套的最后一行多设置个白色竖线,去遮挡多余的一截
–⑧③最后给每行设置横线虚线即可
下图就是设置虚线遇到的问题,不过目前已经解决了vue+element实现树状表格的增删改查;使用el-table树形数据与懒加载实现树状表格增删改查_第2张图片

以下代码可直接复制使用






你可能感兴趣的:(前端,html,vue.js,elementui,前端)