AntDesign树形组件tree和输入input组件融合使用
<a-tree
:tree-data="selectItem.options.options"
:replace-fields="{
children: 'children',
title: 'label',
code: 'code'
}"
>
<template #title="{ label, value, code }">
<div style="display: flex; position: relative">
<a-input @blur="updateLabelByCode(selectItem.options.options, code, label)" size="small"
v-model="label" style="width: 80px"/>
<a-input @blur="updateValueByCode(selectItem.options.options, code, value)" size="small"
v-model="value" style="width: 80px"/>
<div style="position: absolute; left: 180px;">
<a-button style="border: none"
@click="handleTreeData(selectItem.options.options, code, 'sameLevelAdd')"
type="primary" ghost shape="circle" icon="plus-square" size="small"/>
<a-button style="border: none"
@click="handleTreeData(selectItem.options.options, code, 'nextLevelAdd')"
type="primary" ghost shape="circle" icon="minus" size="small"/>
<a-button style="border: none"
@click="handleTreeData(selectItem.options.options, code, 'selfDelete')"
type="primary" ghost shape="circle" icon="delete" size="small"/>
</div>
</div>
</template>
</a-tree>
updateLabelByCode(array, code, newLabel) {
for (let i = 0; i < array.length; i++) {
let item = array[i];
if (item.code === code) {
item.label = newLabel;
return;
}
if (item.children) {
this.updateLabelByCode(item.children, code, newLabel);
}
}
},
handleTreeData(array, code, operateType) {
for (let i = 0; i < array.length; i++) {
let item = array[i];
// 比对节点的 label 和 value
if (item.code === code) {
if (operateType === "sameLevelAdd") {
// 同级别增加
array.splice(i + 1, 0, { value: ``, label: ``, code: nanoid() });
return;
} else if (operateType === "nextLevelAdd") {
// 下一个级别增加
if (!item.children) {
item.children = [];
}
item.children.push({ value: ``, label: ``, code: nanoid() });
this.$forceUpdate()
return;
} else if (operateType === "selfDelete") {
// 删除该节点
array.splice(i, 1);
return;
}
}
// 如果有子节点,递归处理
if (item.children) {
this.handleTreeData(item.children, code, operateType);
}
}
},
学而不思则罔,思而不学则殆!