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

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

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

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

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

 

直接上代码：

html:

 

 

 <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

        <el-table-column label="参数" width="250">

            <template slot-scope="scope">

                <el-input :disabled="isDetails" style="width:120px;" size="small" v-model="scope.row.name" placeholder="请输入参数名" :maxlength="30" show-word-limit @blur="handleBlur(scope.row.name,'参数名')"></el-input>

            </template>

        </el-table-column>

        <el-table-column v-if="!isDetails" label="操作" align="center">

            <template slot-scope="scope">

                <el-button v-if="!isUrl && (scope.row.level && Number(scope.row.level) < 4)" size="mini" type="text" @click.native.prevent="addChild(scope.row)">设置子字段</el-button>

                <el-button v-if="!isDetails" size="mini" type="text" @click.native.prevent="deleteRow(scope.row, scope.$index)">删除</el-button>

            </template>

        </el-table-column>

    </el-table>

    <el-button v-if="!isDetails" type="primary" icon="el-icon-plus" size="mini" @click.native.prevent="addNew">新增</el-button>

</div>

</template>

 

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

 

 删除一行：

 

 

　　let idx = 1;

 　　addChild(row) {

            this.addRow(1, row); //在行中增加children

        },

 　　addNew() {

            this.addRow();//另起新增一行

        },

　　addRow(type, row) {

            // type-0- 新增第一级节点， type-1- 新增子节点

            let id = type ? row.id + "_" + row.children.length : "" + idx;

            let pid = type ? row.id : 0;

            let newObj = {

                id,//行id

                pid,//行的父级id

                name: "",

                children: [],

            };

            if (type) {

                if (!row.children) {

                    row.children = [];

                }

                row.children.push(newObj);

            } else {

                this.tableData.push(newObj);

                idx++;

            }

        },

        // 删除一行

        deleteRow(row, i) {

            if (row.pid) {

                // 有父级元素，先找到父级元素，再从父级元素的children中删除

                this.deleteChildByid(this.tableData, row.pid, row.id);

            } else {

                let fid = this.tableData.findIndex((v) => {

                    return v.id == row.id;

                });

                this.tableData.splice(fid, 1);

            }

        },

 

　　deleteChildByid(arr, pid, id) {

            let that = this;

            arr.forEach((v, i) => {

                if (v.id == pid) {

                    let item = v.children;

                    let idx = item.findIndex((p) => p.id === id);

                    item.splice(idx, 1);

                } else {

                    if (v.children && v.children.length > 0) {

                        that.deleteChildByid(v.children, pid, id);

                    }

                }

            });

        },

 

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