vue3 element-plus实现Tree树控件可增删改查

1.在element-plus组件库中只有增删树形组件的功能，并没有编辑节点的功能；目前我们对组件做修改实现对节点可编辑；

2.template中代码如下

<template>
    <div>
        <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
            :render-content="renderContent"></el-tree>
    </div>
</template>复制

3.script代码

<script setup>
import { ref } from 'vue';
 
let id = 1000;
const data = ref([
    {
        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'
            }
        ]
    }
])
 
// 添加
function append(data) {
    const newChild = { id: id++, label: 'testtest', children: [] };
    if (!data.children) {
        data.children = []
    }
    data.children.push(newChild);
}
 
// 删除
function remove(node, data) {
    const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex(d => d.id === data.id);
    children.splice(index, 1);
}
 
// 编辑
function edit(data) {
    ElMessageBox.prompt('请输入标题', '编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(({ value }) => {
        if (value != null) {
            data.label = value;
        }
    }).catch(() => { });
}
 
// 按钮渲染
function renderContent(h, { node, data, store }) {
    return h(
        "div",
        {
            class: "custom-tree-node",
            style: { width: '100%', display: "flex", justifyContent: "space-between" } // 设置父元素的样式
        },
        [
            h(
                "span",
                {
                    class: "node-label",
                    style: { flex: "1" } // 设置节点名称的样式，使其占据剩余空间
                },
                node.label
            ),
            h(
                "div",
                { class: "action-links" },
                [
                    h(
                        "a",
                        {
                            onClick: () => append(data),
                            style: { marginLeft: "50px", color: "#3c92fc" } // 设置添加按钮的样式，设置左边距
                        },
                        " 添加 "
                    ),
                    h(
                        "a",
                        {
                            onClick: () => edit(data),
                            style: { marginLeft: "10px", color: "#3c92fc" } // 设置编辑按钮的样式，设置左边距
                        },
                        " 编辑 "
                    ),
                    h(
                        "a",
                        {
                            onClick: () => remove(node, data, store),
                            style: { marginLeft: "10px", color: "#fd181d" } // 设置删除按钮的样式，设置左边距
                        },
                        " 删除 "
                    ),
 
                ]
            )
        ]
    );
}
 
</script>复制

4.在style无代码