未知层级树结构表格新增节点,新增子节点,删除节点


用element+vue生成树状表格,实现删除,新增一行?

el-table里边有个属性tree-props。具体的参照官网给出的描述:

支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

如下图。就是表格中的树形结构删除一行和新增一行。

 

直接上代码:

html:

 

 js:增加一行,这个Id要是唯一的值,所以最好前端生成的时候用多位随机码,不建议用下图中的,如果id后台处理就不用管了。

 

 删除一行:

 

 

 删除一行与新增一行就完成了。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM