山河浪漫，
人间温暖。

页面显示

在这里插入图片描述

写在前面

改代码使用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="formState.depPerson"
              placeholder="请输入部门负责人"
              :disabled="formState.disabled"
            />
          </a-form-item>
          <a-form-item ref="depDes" label="部门描述" name="depDes">
            <a-textarea
              v-model:value="formState.depDes"
              placeholder="请输入部门描述"
              :rows="4"
              :disabled="formState.disabled"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  toRaw,
  getCurrentInstance,
  onMounted,
} from "vue";
export default defineComponent({
  setup() {
    let { proxy } = getCurrentInstance();
    const tree = reactive({
      treeData: [],
    });
    const selectedKeys = ref();
    const visible = ref(false);
    const modalTitle = ref("新增部门");
    const formRef = ref();
    const formState = reactive({
      depName: "",
      depPerson: "",
      depDes: "",
      parentId: "",
      id: "",
      disabled: false,
    });
    const rules = {
      depName: [
        {
          required: true,
          message: "请输入部门名称",
          trigger: "blur",
        },
      ],
      depPerson: [
        {
          required: true,
          message: "请输入部门负责人",
          trigger: "blur",
        },
      ],
      depDes: [
        {
          required: true,
          message: "请输入部门描述",
          trigger: "blur",
        },
      ],
    };
    const onLoadData = (treeNode) => {
      return new Promise((resolve) => {
        proxy.axios
          .get(`/apis/depts/${treeNode.dataRef.id}/subDepts`)
          .then((res) => {
            if (res.data.data == 0) {
              resolve();
              return;
            }
            treeNode.dataRef.children = treeNode.dataRef.children.concat(
              res.data.data
            );
            tree.treeData = [...tree.treeData];
            resolve();
          })
          .catch(() => {
            message.error("查询失败");
          });
      });
    };
    const searchTree = (id) => {
      proxy.axios
        .get(`/apis/depts/${id}/subDepts`)
        .then((res) => {
          message.success("查询成功");
          // console.log(res);
          tree.treeData = tree.treeData.concat(res.data.data);
        })
        .catch(() => {
          message.error("查询失败");
        });
    };
    // 新增下级按钮
    const addNode = (e) => {
      formState.id = e.id;
      visible.value = true;
      modalTitle.value = "新增部门";
    };
    // 修改按钮
    const editNode = (e) => {
      console.log(e);
      formState.depName = e.title;
      formState.depPerson = e.owner;
      formState.parentId = e.parentId;
      formState.id = e.id;
      formState.depDes = e.remark;
      visible.value = true;
      modalTitle.value = "修改部门";
    };
    // 删除按钮
    const deleteNode = (e) => {
      console.log(e);
      proxy.axios
        .delete("/apis/depts/" + e.id)
        .then((res) => {
          if (res.data.status == 1) {
            let treeData = tree.treeData;
            tree.treeData = deleteParentNode(treeData, e.key);
            console.log(tree.treeData);
          } else {
            message.error("删除失败，请联系管理员");
          }
        })
        .catch(() => {
          message.error("删除失败，请联系管理员");
        });
    };
    const has = (obj, key) => {
      if (obj.key !== key) {
        return obj;
      }
    };
    const deleteParentNode = (data, key) => {
      const ret = [];
      data.forEach((ele) => {
        if (has(ele, key)) {
          if (ele.children) {
            ele.children = deleteParentNode(ele.children, key);
          }
          ret.push(ele);
        }
      });
      return ret;
    };
    const hasNode = (obj, id) => {
      console.log(obj, id);
      if (obj.id == id) {
        return true;
      } else {
        return false;
      }
    };
    const addNextNode = (data, id, addNodes) => {
      console.log(data, id, addNodes);
      const ret = [];
      data.forEach((ele) => {
        if (hasNode(ele, id)) {
          if (ele.children.length > 0) {
            ele.children.push(addNodes);
            ele.children = addNextNode(ele.children, id);
          }
          ret.push(ele);
        } else {
          if (ele.children) {
            ele.children = addNextNode(ele.children, id);
          }
          ret.push(ele);
        }
      });
      return ret;
    };
    const hasUpdate = (obj, id, updateData) => {
      console.log(obj, id);
      if (obj.id !== id) {
        return obj;
      } else {
        obj.name = updateData.name;
        obj.owner = updateData.owner;
        obj.remark = updateData.remark;
        return obj;
      }
    };
    const updateNode = (data, id, updateData) => {
      const ret = [];
      data.forEach((ele) => {
        if (hasUpdate(ele, id, updateData)) {
          if (ele.children) {
            ele.children = updateNode(ele.children, id, updateData);
          }
          ret.push(ele);
        }
      });
      return ret;
    };
    const handleOk = (e) => {
      console.log(e);
      formRef.value
        .validate()
        .then(() => {
          console.log("values", formState, toRaw(formState), e);
          if (modalTitle.value == "新增部门") {
            //新增部门
            proxy.axios
              .post("/apis/depts", {
                name: formState.depName,
                owner: formState.depPerson,
                parentId: formState.id,
                remark: formState.depDes,
              })
              .then((res) => {
                if (res.data.status == 0) {
                  message.error("该部门以重复，请修改");
                } else {
                  tree.treeData = addNextNode(
                    tree.treeData,
                    formState.parentId,
                    res.data.data
                  );
                }
              })
              .catch(() => {
                message.error("新增失败请联系管理员");
              })
              .finally(() => {
                resetForm();
                visible.value = false;
              });
          } else {
            //修改部门
            proxy.axios
              .patch(`/apis/depts/${formState.id}`, {
                name: formState.depName,
                owner: formState.depPerson,
                parentId: formState.parentId,
                remark: formState.depDes,
              })
              .then((res) => {
                if (res.data.status == 1) {
                  tree.treeData = updateNode(tree.treeData, formState.id, {
                    name: formState.depName,
                    owner: formState.depPerson,
                    parentId: formState.parentId,
                    remark: formState.depDes,
                    id: formState.id,
                  });
                } else {
                  message.error("修改失败请联系管理员");
                }
              })
              .catch(() => {
                message.error("修改失败请联系管理员");
              })
              .finally(() => {
                resetForm();
                visible.value = false;
              });
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(() => {
      searchTree(0);
    });
    return {
      ...toRefs(tree),
      selectedKeys,
      addNode,
      deleteNode,
      editNode,
      visible,
      handleOk,
      formRef,
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 17,
      },
      other: "",
      formState,
      rules,
      resetForm,
      modalTitle,
      onLoadData,
    };
  },
});
</script>
<style lang="scss" class="scoped">
.department {
  .departmentTitle {
    padding: 10px;
    background: #eee;
  }
}
</style>

原文链接：https://www.jianshu.com/p/a87269a22aa9