用element+vue生成樹狀表格,實現刪除,新增一行?
el-table里邊有個屬性tree-props。具體的參照官網給出的描述:
支持樹類型的數據的顯示。當 row 中包含 children
字段時,被視為樹形數據。渲染樹形數據時,必須要指定 row-key
。通過指定 row 中的 hasChildren
字段來指定哪些行是包含子節點。children
與 hasChildren
都可以通過 tree-props
配置。
如下圖。就是表格中的樹形結構刪除一行和新增一行。
直接上代碼:
html:
js:增加一行,這個Id要是唯一的值,所以最好前端生成的時候用多位隨機碼,不建議用下圖中的,如果id后台處理就不用管了。
刪除一行:
刪除一行與新增一行就完成了。