antDesign a-tree新增、编辑和删除 vue3语法_a-tree 树组件 vue3-优快云博客

本文链接：https://blog.youkuaiyun.com/Yane410/article/details/131514357

这篇文章展示了一个基于Vue.js的组织结构管理界面，使用a-card组件和a-tree来显示和操作组织列表。用户可以对节点进行添加、编辑和删除操作，点击树节点时会触发选择事件以更新状态。此外，还提供了添加新组织和编辑现有组织的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

<template>
    <a-card class="box-card"> 
<div class="organization-list">
    <a-tree blockNode class="draggable-tree" v-model:selectedKeys="children: 'children',
    title: 'deptName', key: 'yunEasyId'}">
       <template #title="item">
        {{ item.deptName }}({{ item.total }})
       <PlusOutlined @click.stop="addClick(item)" class="tree-icon del" />
       <EditOutlined @click.stop="editClick(item)" class="tree-icon del" />
       <DeleteOutlined @click.stop="deleteClick(item)" class="tree-icon deled"  />
     </template>
    </a-tree>
  </div>

        <organizationAddEdit ref="refOrganization" @subareaList="subareaList"></organizationAddEdit>
    </a-card>
</template>
<script setup>
const selectedKeys = ref(["1"]);
const refOrganization = ref()
const fileList = ref([]);
const treeData = ref([]);

function selectClick(selectedKeys, e) {
    formState.value.deptId = selectedKeys[0]
    onLoad()
}
//新增组织列表
function addClick(item) {
    row.value.type = "add"
    row.value.parentId = item.yunEasyId
    nextTick(() => {
        refOrganization.value.init(row.value)
    })

}
//编辑
function editClick(item) {
    row.value.type = "edit"
    row.value.id = item.yunEasyId
    row.value.deptName = item.deptName
    nextTick(() => {
        refOrganization.value.init(row.value)
    })
}
// 删除
function deleteClick(item) {
    Modal.confirm({
        title: '确认删除此数据?',
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
            deleteDept(item.id).then(res => {
                if (res.data.code === 0) {
                    message.success("删除成功")
                    subareaList()
                } else {
                    message.error(res.data.msg)
                }
            })
        },
        onCancel() { },
    });
}

onMounted(() => {
    subareaList()
})

//组织列表
function subareaList() {
    getSubareaList(parentName.value).then(res => {
        treeData.value = res.data.data
    })
    formState.value.deptId = '1'
    onLoad()
}
<script/>