使用el-tree
的filter-node-method
属性及filter
方法判断新增节点名称是否重名
<el-tree
:data="data"
node-key="id"
default-expand-all
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="!data.append">{{ node.label }}</span>
<span v-else >
<el-input
type="text"
size="mini"
placeholder="请输入名称"
v-model="data.label"
@change="handleChange(data)"
/>
</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)"> Append </el-button>
</span>
</span>
</el-tree>
<script>
let id = 1000;
export default {
data() {
const data = [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}];
return {
data: JSON.parse(JSON.stringify(data)),
data: JSON.parse(JSON.stringify(data))
}
},
methods: {
append(data) {
const newChild = { id: id++, label: '', children: [], append: true };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
filterNode(filter, data) {
let { isFilter, value } = filter;
if (isFilter) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
if (value.label && data.label === value.label && data.id !== value.id) {
value.label = '';
this.$message.error('名称重复');
}
return true;
},
handleChange(data) {
this.tree.filter({ isFilter: false, value: data });
},
}
};
</script>