目录
功能说明:
- 可通过拖拽改变,数据嵌套顺序
- 首层节点(主干):不可拖拽,不可以有同级节点
- 主干,限制仅有一个主干
- 主干:不可删除,可编辑,
- 子节点限制:如果节点为汉字类型就禁止添加下一级,即为末尾节点(叶子)
效果图:
代码:
<el-tree
:data="branchFrom.data"
default-expand-all
draggable
node-key="id"
:allow-drop="allowDrop"
:allow-drag="allowDrag">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<span v-if="nodetotle(node.label)"
style="color:#409EFF;margin-right: 10px;">{
{ node.label}}</span>
//逻辑符号蓝色
<span v-else style="color:#888;">{
{ node.label}}</span>
</span>
<span>
<el-button
v-if="nodetotle(data.label)"
class="el-icon-plus"
type="text"
size="mini"
@click="() => append(data)">
<!-- add -->
</el-button>
<el-button
class="el-icon-edit"
type="text"
size="mini"
@click="() => edit(node,data)">
<!-- edit -->
</el-button>
<!-- v-if="node.label" -->
<el-button
v-if="branchFrom.data[0].id!==data.id"
class="el-icon-delete"
type="text"
size="mini"
@click="() => remove(node, data)">
<!-- Delete -->
</el-button>
</span>
</span>
</el-tree>
//页面数据
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}],
//节点类型识别
nodetotle(a){
return a=='and'||a=='not'||a=='or'
},
//tree数据拖拽
allowDrop(draggingNode, dropNode, type) {
//限制首层仅有一个节点,其他节点不可并列
if(!dropNode.parent.parent){
return false
}
if (dropNode.data.label === '二级 3-1') {
return type !== 'inner';
} else {
return true;
}
},
allowDrag(draggingNode) {
//首层节点禁止拖拽
if(draggingNode.data.id==this.data[0].id){
this.$message({
message: '首个逻辑禁止拖拽',
type: 'warning'
});
return false
}
return draggingNode.data.label.indexOf('1') === -1;
},