<el-tree
ref="treeRef"
:data="data"
:expand-on-click-node="false"
:highlight-current="true"
:props="defaultProps"
class="menu-tree"
default-expand-all
draggable
node-key="id"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<template v-if="!isEditing || editingNodeId !== data.id">
{{ node.label }}
</template>
<template v-else>
<el-input
v-model="editingNodeLabel"
@blur="cancelEdit"
@keyup.enter="updateNodeLabel(data)"
></el-input>
</template>
<span>
<a :style="{marginRight: '0.5rem'}" @click="append(data)">
<el-icon :style="{color:'#0000FF'}">
<Plus />
</el-icon>
</a>
<a :style="{marginRight: '0.5rem'}" @click="remove(node, data)">
<el-icon :style="{color:'#DA3434'}">
<Delete />
</el-icon>
</a>
<a :style="{marginRight: '0.5rem'}" @click="edit(node,data)">
<el-icon :style="{color:'#0000FF'}">
<Edit />
</el-icon>
</a>
</span>
</span>
</template>
</el-tree>
/** 树节点id */
let id = 1000;
/** 单击节点的数据 */
const nodeData = ref({});
/** 节点是否修改 */
const isEditing = ref(false);
/** 保存正在编辑的节点ID */
const editingNodeId = ref<number | null>(null);
/** 临时存储编辑中的节点名称 */
const editingNodeLabel = ref<string>("");
/** 树形结构数据 */
const defaultProps = {
children: "children",
label: "label"
};
/** 树形结构数据 */
interface Tree {
[key: string]: any;
}
/** 树形结构数据 */
const data: Tree[] = [
{
id: 1,
label: "基本"
},
{
id: 2,
label: "属性",
data: [
{
id: 1,
label: "电池电压"
},
{
id: 2,
label: "正在充电"
},
{
id: 3,
label: "固件版本"
},
{
id: 4,
label: "输入电压"
},
{
id: 5,
label: "信号质量"
},
{
id: 6,
label: "位置"
},
{
id: 7,
label: "服务器地址"
},
{
id: 8,
label: "服务器用户名"
},
{
id: 9,
label: "通讯协议"
},
{
id: 11,
label: "产品令牌"
},
{
id: 12,
label: "设备令牌"
}
]
},
{
id: 3,
label: "功能"
},
{
id: 4,
label: "时间"
},
{
id: 5,
label: "授权"
},
{
id: 6,
label: "固件"
},
{
id: 7,
label: "警报"
},
{
id: 8,
label: "界面"
},
{
id: 9,
label: "影子"
}
];
/** 修改树节点 */
const edit = (node: Node, data: Tree) => {
isEditing.value = true;
editingNodeId.value = data.id;
editingNodeLabel.value = data.label;
};
/** 点击树节点 */
const handleNodeClick = (data: Tree) => {
nodeData.value = data.data;
};
/** 添加树节点 */
const append = (data: Tree) => {
const newChild = { id: id++, label: "testtest", children: [] };
if (!data.children) {
data.children = [];
}
data.children.push(newChild);
data.value = [...data.value];
};
/** 删除树节点 */
const remove = (node: Node, data: Tree) => {
const parent = node.parent;
const children: Tree[] = parent.data.children || parent.data;
const index = children.findIndex((d) => d.id === data.id);
children.splice(index, 1);
data.value = [...data.value];
};
/** 更新节点名称 */
const updateNodeLabel = (data: Tree) => {
if (editingNodeId.value === data.id) {
data.label = editingNodeLabel.value;
isEditing.value = false;
editingNodeId.value = null;
}
};
/** 取消节点编辑 */
const cancelEdit = () => {
isEditing.value = false;
editingNodeId.value = null;
};
vue3 ts element-plus el-tree添加树节点 删除树节点 修改树节点
2024-04-20 18:42:05 12 阅读