一：添加新增dialog

1.新建一个el-dialog作为新增子菜单的模态框

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

2.在data中添加dialogVisible属性，默认是false

data() {
    return {
      //三级菜单数据
      menus: [],
      //默认展开的数组
      expandedKey:[],
      //是否显示新增模态框，默认是false
      dialogVisible:false,
      //三级菜单展开时的属性
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },

3.在append方法，将此属性改为true

    /**
     * 添加节点
     */
    append(data) {
      //点击append，打开模态框
      this.dialogVisible = true;
    },

刷新项目，点击append

4.将dialog里面的内容优化成可以输入内容

1） <el-form></el-form>标签表示这是一个表单
2）:model="category"绑定category对象

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form :model="category">
        <el-form-item label="分类名称" >
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    //和form表单做数据绑定
      category:{
        name:"",
      },

5.为确定按钮绑定单击函数

1）完善category对象，将添加需要的所有属性全部声明

• name: “”,//当前菜单名称
• parentCid: 0,//父Id
• catLevel: 0,//当前菜单层级
• showStatus:1,//当前菜单默认显示
• sort:0,//菜单排序

    category:{
        name: "",//当前菜单名称
        parentCid: 0,//父Id
        catLevel: 0,//当前菜单层级
        showStatus:1,//当前菜单默认显示
        sort:0,//菜单排序
      },

2）点击append的时候，为category对象的对象赋值
this.dialogVisible = true;//点击append，打开模态框
this.category.parentCid = data.catId; //当前节点的ID就是新增菜单的父类id
this.category.catLevel = data.catLevel*1 + 1;//将当前选中菜单的层级加上一，就是子菜单的等级，为了防止是字符串，所以获取到以后先乘1，再加一

   /**
     * 添加节点
     */
    append(data) {
      //点击append，打开模态框
      this.dialogVisible = true;
      //当前节点的ID就是新增菜单的父类id
      this.category.parentCid = data.catId;
      //将当前选中菜单的层级加上一，就是子菜单的等级，为了防止是字符串，所以获取到以后先乘1，再加一
      this.category.catLevel = data.catLevel*1 + 1;
    },

6.发送post请求，提交添加的菜单

/**
     * 新增模态框，确定按钮点击事件
     */
    addCategory(){
       this.$http({
            url: this.$http.adornUrl("/product/category/save"),
            method: "post",
            data: this.$http.adornData(this.category, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单保存成功",
              type: "success",
            });
            //关闭当前dialog模态框
            this.dialogVisible = false;
            //刷新页面
            this.getMenus();
            //设置出需要默认展开的菜单
            this.expandedKey = [this.category.parentCid];
          });
    },

注：当前页面

<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      :default-expanded-keys="expandedKey"
      show-checkbox
      node-key="catId"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)"
            v-if="node.level <= 2"
            >Append</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)"
            v-if="node.childNodes.length == 0"
            >Delete</el-button
          >
        </span>
      </span>
    </el-tree>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form :model="category">
        <el-form-item label="分类名称" >
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      //和form表单做数据绑定
      category:{
        name: "",//当前菜单名称
        parentCid: 0,//父Id
        catLevel: 0,//当前菜单层级
        showStatus:1,//当前菜单默认显示
        sort:0,//菜单排序
      },
      //三级菜单数据
      menus: [],
      //默认展开的数组
      expandedKey: [],
      //是否显示新增模态框，默认是false
      dialogVisible: false,
      //三级菜单展开时的属性
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 获取三级菜单数据
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;
      });
    },
    /**
     * 添加节点
     */
    append(data) {
      //点击append，打开模态框
      this.dialogVisible = true;
      //当前节点的ID就是新增菜单的父类id
      this.category.parentCid = data.catId;
      //将当前选中菜单的层级加上一，就是子菜单的等级，为了防止是字符串，所以获取到以后先乘1，再加一
      this.category.catLevel = data.catLevel*1 + 1;
    },
    /**
     * 新增模态框，确定按钮点击事件
     */
    addCategory(){
       this.$http({
            url: this.$http.adornUrl("/product/category/save"),
            method: "post",
            data: this.$http.adornData(this.category, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单保存成功",
              type: "success",
            });
            //关闭当前dialog模态框
            this.dialogVisible = false;
            //刷新页面
            this.getMenus();
            //设置出需要默认展开的菜单
            this.expandedKey = [this.category.parentCid];
          });
    },
    /**
     * 移除节点
     */
    remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success",
            });
            //刷新页面
            this.getMenus();
            //设置出需要默认展开的菜单
            this.expandedKey = [node.parent.data.catId];
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    /**
     * 加载页面的时候查询三级菜单
     */
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

此时，添加功能就完成了！！！