antd + vue3实现tree树增加按钮

页面显示

写在前面

改代码使用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