<template>
<div>
<div style="margin-bottom: 20px">
<el-button
v-if="tableData.length >= 1"
type="primary"
size="small"
@click="sonTable"
:loading="sonLoading"
>
新建子节点
</el-button>
<el-button
v-if="tableData.length >= 1"
type="primary"
size="small"
@click="peerTable"
:loading="peerLoading"
>
新建同级节点
</el-button>
<el-button
v-if="tableData.length < 1"
type="primary"
size="small"
@click="reset(1)"
:loading="newLoading"
>
新建节点
</el-button>
<el-button type="primary" size="small" @click="passData">
确定
</el-button>
</div>
<el-table
v-loading="loading"
:data="tableData"
border
row-key="key"
style="width: 100%"
default-expand-all
:tree-props="{ children: 'childDto', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
:selectable="selectAble"
>
</el-table-column>
<el-table-column label="序号" align="center">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="branchName" label="名称" align="center">
<template v-slot="scope">
<span v-if="!scope.row.showInput">{{ scope.row.branchName }}</span>
<i
v-if="!scope.row.showInput"
class="el-icon-edit icon"
@click="showInput(scope.row)"
></i>
<el-input
v-focus
v-if="scope.row.showInput"
v-model="scope.row.branchName"
@blur="inputBlur(scope.row)"
placeholder="请输入内容"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120">
<template v-slot="scope">
<el-button size="mini" type="text" @click="deleteTable(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {
tableData: [],
tableSelected: {},
faTable: {},
sonLoading: false,
peerLoading: false,
newLoading: false,
loading: false,
treeArr: [],
};
},
filters: {},
computed: {},
watch: {},
created() {},
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted(el) {
// 聚焦元素
if (el.querySelector("input")) {
el.querySelector("input").focus();
}
},
},
},
mounted() {
// 1为新建 2为编辑 this.treeArr为编辑的数据
this.reset(1);
},
beforeDestroy() {},
methods: {
// 新建 or 编辑
reset(type) {
this.tableData = [];
this.newLoading = true;
if (type === 1) {
this.tableData = [
{
id: Math.random() + "",
key: Math.random() + "",
branchName: "",
showInput: true,
},
];
this.tableData = this.flatten(this.tableData, 1);
}
if (type === 2) {
if (this.treeArr.length > 0) {
this.tableData = this.treeArr;
} else {
this.tableData = [
{
id: Math.random() + "",
key: Math.random() + "",
branchName: "",
showInput: true,
},
];
}
this.tableData = this.flatten(this.tableData, 2);
}
this.tableSelected = {};
this.faTable = {};
this.tableData.forEach((item) => {
item.first = 1;
});
this.newLoading = false;
},
// 获取列表数据
passData() {
// 删除名称为空的数据
this.tableData.forEach((item) => {
if (item.branchName === "") {
this.tableData = this.tableData.filter((items) => {
return items.id !== item.id;
});
}
});
this.tableData = this.nullFlatten(this.tableData);
// 最终数据+++++++++++++++++++++++++++++++++++
console.log(this.tableData)
this.$emit("passData", this.tableData);
},
// 删除名称为空的数据
nullFlatten(arr) {
arr.map((item) => {
if (item.childDto !== undefined) {
for (let i = 0; i < item.childDto.length; i++) {
if (item.childDto[i].branchName === "") {
item.childDto = item.childDto.filter((items) => {
return items.id !== item.childDto[i].id;
});
}
}
}
if (Array.isArray(item.childDto)) {
this.nullFlatten(item.childDto);
}
});
return arr;
},
// 名称不为空切失去焦点时隐藏input
inputBlur(val) {
if (val.branchName) {
val.showInput = false;
}
},
// 点击编辑名称
showInput(val) {
val.showInput = !val.showInput;
},
// 是否可选
selectAble(row) {
// 给数据手动添加一个新字段 status 默认为1, 如果需要设置disbaled; status 变为0
if (row.status === 1) {
return true;
}
return false;
},
// 选中方法
handleSelectionChange(val) {
if (val.length > 0) {
this.tableSelected = val[0];
this.tableData = this.flattenId(this.tableData, val[0].id);
this.faTable = val[0];
} else {
this.tableSelected = {};
this.faTable = {};
this.tableData = this.flatten(this.tableData, 1);
}
},
// 选中状态
flatten(arr, type) {
arr.map((item) => {
this.$set(item, "status", 1);
this.$set(item, "key", Math.random() + "");
if (type === 1 && item.branchName === "") {
this.$set(item, "showInput", true);
} else {
this.$set(item, "showInput", false);
}
if (Array.isArray(item.childDto)) {
this.flatten(item.childDto, type);
}
});
return arr;
},
// 修改选中其他状态
flattenId(arr, id) {
arr.map((item) => {
if (item.id === id) {
this.$set(item, "status", 1);
} else {
this.$set(item, "status", 0);
}
if (Array.isArray(item.childDto)) {
this.flattenId(item.childDto, id);
}
});
return arr;
},
// 新建子节点
sonTable() {
this.sonLoading = true;
if (this.tableSelected.childDto === undefined) {
let arr = [
{
id: Math.random() + "",
key: Math.random() + "",
parentId: this.tableSelected.id,
branchName: "",
showInput: true,
},
];
this.$set(this.tableSelected, "childDto", arr);
} else {
this.tableSelected.childDto.push({
id: Math.random() + "",
key: Math.random() + "",
parentId: this.tableSelected.id,
branchName: "",
showInput: true,
});
}
this.sonLoading = false;
},
// 新建同级节点
peerTable() {
this.peerLoading = true;
let obj = {
id: Math.random() + "",
key: Math.random() + "",
branchName: "",
showInput: true,
first: 1,
};
if (JSON.stringify(this.faTable) !== "{}") {
if (this.faTable.first === 1) {
this.tableData.forEach((item) => {
if (item.status === 1) {
this.tableData.push(obj);
}
});
} else {
this.tableData = this.sonFlatten(this.tableData, this.faTable.id);
}
}
this.peerLoading = false;
},
// 子项新建同级节点
sonFlatten(arr, id) {
let obj = {
id: Math.random() + "",
key: Math.random() + "",
parentId: this.faTable.id,
branchName: "",
showInput: true,
};
arr.map((item) => {
if (item.childDto !== undefined) {
for (let i = 0; i < item.childDto.length; i++) {
if (item.childDto[i].id === id) {
item.childDto.push(obj);
}
}
}
if (Array.isArray(item.childDto)) {
this.sonFlatten(item.childDto, id);
}
});
return arr;
},
// 删除
deleteTable(val) {
if (val.first === 1) {
this.tableData = this.tableData.filter((item) => {
return item.id !== val.id;
});
} else {
this.tableData = this.delFlatten(this.tableData, val.id);
}
},
// 子节点删除
delFlatten(arr, id) {
arr.map((item) => {
if (item.childDto !== undefined) {
for (let i = 0; i < item.childDto.length; i++) {
if (item.childDto[i].id === id) {
item.childDto = item.childDto.filter((items) => {
return items.id !== id;
});
}
}
}
if (Array.isArray(item.childDto)) {
this.delFlatten(item.childDto, id);
}
});
return arr;
},
},
};
</script>
<style scoped lang="scss">
::v-deep {
// 隐藏全选框
.el-table__header-wrapper .el-checkbox {
display: none;
}
}
// 编辑图标样式
.icon {
color: #66b1ff;
margin-left: 10px;
cursor: pointer;
}
</style>