avue树菜单的增删改查

这里使用的是官网自带的一个菜单 传送门avue

我这里自己还设置了两个菜单

<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" v-model="treeForm" ref="treeForm"
              @save="saveTree" @del="delTree">
              <template slot-scope="scope" slot="menu">
                <div class="avue-tree__item" @click="editDept(scope.node)">修改</div>
                <div class="avue-tree__item" @click="moveDept(scope.node)">移动部门</div>
                <div class="avue-tree__item" @click="moveUser(scope.node)">移动用户</div>
              </template>
            </avue-tree>

这里是这个树的初始化，一定要在这里对menu改成true，不然右键就没有效果，如果使用el-tree，官网自带了一个右键的点击事件。在这个option里面可以配置，addBtn，editBtn以及表格的数据

treeOption: {
        menu: true,
        nodeKey: 'id',
        lazy: true,
        editBtn: false,
        defaultExpandedKeys: ["1"],
        treeLoad: function (node, resolve) {
          const parentId = (node.level === 0) ? 0 : node.data.id;
          getDeptLazyTree(parentId).then(res => {
            resolve(res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              }
            }))
          });
        },
        formOption: {
          labelWidth: 100,
          column: [
            {
              label: '英文名称',
              prop: 'enName'
            },
            {
              label: '排序',
              prop: 'sort',
              type: 'number',
              minRows: 1,
            }, {
              label: '传真',
              prop: 'fax'
            }, {
              label: '电话',
              prop: 'phone'
            }, {
              label: '地址',
              prop: 'address'
            }, {
              label: '邮编',
              prop: 'zipCode'
            }, {
              label: '值班电话',
              prop: 'ondutyPhone'
            }, {
              label: '分组',
              prop: 'deptCategory',
              dataType: "number",
              type: 'select',
              dicUrl: "/api/blade-system/dict/dictionary?code=org_category",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
            }, {
              label: '激活',
              type: 'select',
              prop: 'isactive',
              dicData: [
                {
                  label: '是', value: 0
                }, {
                  label: '否', value: 1
                }
              ]
            },
            {
              label: '描述',
              type: 'textarea',
              prop: 'remark'
            },
          ],
        },
        addBtn: true,
        size: 'small',
        props: {
          labelText: '名称',
          label: 'title',
          value: 'value',
          children: 'children',
        }
      },