大概样子就是这样,有四个操作功能按钮,增加子集,增加同级,删除,清空,思路参考了element ui 树的增删改查
直接看代码
. 首先是表格,多余的表格行我删除了 自行添加
<el-table
:data="tableData"
style="width: 100%;font-size:18px"
row-key="id"
border
default-expand-all
ref="tableData"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
:header-cell-style="{background:'#d6e5fb',padding:'8px 0px'}"
:cell-style="{padding:'4px 0px'}"
>
<el-table-column label="操作" min-width="45%" align="center" header-align="center">
<template slot-scope="scope">
<el-button
@click="addtablezhuanfa(scope)"
type="primary"
size="small"
:disabled="scope.row.moren!=''||scope.row.value!=''"
plain
>增加子级</el-button>
<el-button
@click="addtablezhuanfafy(scope)"
type="primary"
size="small"
plain
>增加同级</el-button>
<el-button
@click="removetablezhuanfa(scope)"
type="primary"
size="small"
plain
:disabled="tableData.length==1&&scope.row.parentid==0"
>删除</el-button>
</el-table-column>
. 表格的数据
tableData: [
{
id: 1,
children: [],
moren: "",
parentid: 0,
},
],
tableDataobj:{},//对tableData数据处理
methods 方法
//增加子级
addtablezhuanfa(scope) {
var arr = [];
var obj = {
id: this.indexid++,
parentid: scope.row.id,
children: [],
};
if (scope.row.children.length != 0) {
arr = scope.row.children;
arr.push(obj);
this.$set(scope.row, "children", arr);
} else {
this.$set(scope.row, "children", [obj]);
}
},
//增加同级-- 这里要注意是否为第一级,在之前先对整个数组进行处理
addtablezhuanfafy(scope) {
if (scope.row.parentid != 0) {
this.tableDataobj = {};
this.jsonarr(this.tableData, "");
var obj = this.tableDataobj[scope.row.parentid];
delete obj.lujin;
var arr = obj.children;
var objj = {
id: this.indexid++,
parentid: obj.id,
children: [],
};
arr.push(objj);
this.$set(obj, "children", arr);
} else {
this.tableData.push({
id: this.indexid++,
children: [],
parentid: 0,
});
}
},
//数据进行的处理
jsonarr(arr, url) {
for (var i = 0; i < arr.length; i++) {
this.tableDataobj[arr[i].id] = arr[i];
this.tableDataobj[arr[i].id].lujin = url + "/" + i;
if (arr[i].children) {
this.jsonarr(arr[i].children, url + "/" + i + "/" + "children");
}
}
},
// 删除
removetablezhuanfa(scope) {
this.$confirm("是否删除", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
})
.then(() => {
if (scope.row.parentid != 0) {
this.tableDataobj = {};
this.jsonarr(this.tableData, "");
// 自己的Index 父级的路径
var arr1 = this.tableDataobj[scope.row.parentid].lujin
.split("/")
.slice(1);
var arr2 = this.tableDataobj[scope.row.id].lujin
.split("/")
.slice(1);
var obj = {};
for (var i = 0; i < arr1.length; i++) {
if (JSON.stringify(obj) == "{}") {
obj = this.tableData[arr1[i]];
} else {
obj = obj[arr1[i]];
}
}
var arr = obj.children;
arr = arr
.slice(0, arr2[arr2.length - 1])
.concat(arr.slice(arr2[arr2.length - 1] + 1));
this.$set(obj, "children", arr);
} else {
this.tableDataobj = {};
this.jsonarr(this.tableData, "");
var arr2 = this.tableDataobj[scope.row.id].lujin
.split("/")
.slice(1);
this.tableData = this.tableData
.slice(0, arr2[arr2.length - 1])
.concat(this.tableData.slice(arr2[arr2.length - 1] + 1));
}
})
.catch(() => {
});
},