antDesign a-tree新增、编辑和删除 vue3语法
【代码】antDesign a-tree新增、编辑和删除 vue3语法。
·
效果图:
<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/>
更多推荐
已为社区贡献2条内容
所有评论(0)