antd + vue3实现tree树增加按钮

最新推荐文章于 2024-07-25 13:46:42 发布

lbchenxy

最新推荐文章于 2024-07-25 13:46:42 发布

阅读量4.1k

点赞数 2

分类专栏： antd vue+vue3 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/lbchenxy/article/details/116705766

版权

本文介绍如何在Vue3项目中结合Ant Design Vue库，利用slot特性为Tree组件添加自定义按钮。强调接口返回数据需包含title, key, children字段，避免与API冲突。" 103923423,9178892,C++中删除map和set元素的方法,"['C++编程', '数据结构', '容器操作']

摘要由CSDN通过智能技术生成

页面显示
在这里插入图片描述

写在前面

改代码使用slot，接口返回值必须为title，key，children，不能使用API 在这里插入图片描述
这个会导致我们按钮的slot冲突

完整代码

<template>
  <div class="department">
    <a-card title="部门管理" :bordered="false">
      <div>
        <a-row class="departmentTitle">
          <a-col :span="10">部门名称</a-col>
          <a-col :span="10">部门负责人</a-col>
          <a-col :span="4" style="text-align:center">操作</a-col>
        </a-row>
      </div>

      <a-tree
        ref="tree1"
        :load-data="onLoadData"
        :tree-data="treeData"
        :defaultExpandAll="false"
        :selectedKeys="selectedKeys"
        blockNode
      >
        <template v-slot:title="nodeData">
          <a-row>
            <a-col :span="10">{
   {
    nodeData.title }}</a-col>
            <a-col :span="10">{
   {
    nodeData.dataRef.owner }}</a-col>
            <a-col :span="4">
              <a-button-group style="float:right">
                <a-button size="small" @click="addNode(nodeData)"
                  >新增下级</a-button
                >
                <a-button size="small" @click="editNode(nodeData)"
                  >修改</a-button
                >
                <a-popconfirm
                  title="确认删除该部门？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="deleteNode(nodeData)"
                >
                  <a-button size="small">删除</a-button>
                </a-popconfirm>
              </a-button-group>
            </a-col>
          </a-row>
        </template>
      </a-tree>
      <a-modal
        v-model:visible="visible"
        :title="modalTitle"
        @ok="handleOk"
        @cancel="resetForm"
        okText="确认"
        cancelText="取消"
        :maskClosable="false"
        :closable="false"
      >
        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item ref="depName" label="部门名称" name="depName">
            <a-input
              v-model:value="formState.depName"
              placeholder="请输入部门名称"
              :disabled="formState.disabled"
            />
          </a-form-item>
          <a-form-item ref="depPerson" label="部门负责人" name="depPerson">
            <a-input
              v-model:value