Vue.js 实现 3 级树形菜单，附带新增、删除、编辑功能

<template>
  <div class='tree-menu'>
    <el-tree
      :data='menuTree'
      :props='defaultProps'
      :default-expand-all='true'
      :indent='20'
      node-key='id'
      @node-click='handleNodeClick'
    >
      <span class='action-btns' slot-scope='{ node, data }'>
        <el-button
          type='primary'
          size='mini'
          @click.stop.prevent='handleAdd(node)'
        >
          新增
        </el-button>
        <el-button
          type='danger'
          size='mini'
          @click.stop.prevent='handleDelete(node)'
        >
          删除
        </el-button>
        <el-button
          size='mini'
          @click.stop.prevent='handleEdit(node)'
        >
          编辑
        </el-button>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  name: 'TreeMenu',
  data() {
    return {
      menuTree: [
        {
          id: 1,
          label: '菜单1',
          children: [
            {
              id: 2,
              label: '子菜单1-1',
              children: [
                {
                  id: 3,
                  label: '子菜单1-1-1'
                },
                {
                  id: 4,
                  label: '子菜单1-1-2'
                }
              ]
            },
            {
              id: 5,
              label: '子菜单1-2',
              children: [
                {
                  id: 6,
                  label: '子菜单1-2-1'
                },
                {
                  id: 7,
                  label: '子菜单1-2-2'
                }
              ]
            }
          ]
        },
        {
          id: 8,
          label: '菜单2',
          children: [
            {
              id: 9,
              label: '子菜单2-1',
              children: [
                {
                  id: 10,
                  label: '子菜单2-1-1'
                },
                {
                  id: 11,
                  label: '子菜单2-1-2'
                }
              ]
            },
            {
              id: 12,
              label: '子菜单2-2',
              children: [
                {
                  id: 13,
                  label: '子菜单2-2-1'
                },
                {
                  id: 14,
                  label: '子菜单2-2-2'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(node) {
      console.log(node);
    },
    handleAdd(node) {
      console.log('新增', node);
    },
    handleDelete(node) {
      console.log('删除', node);
    },
    handleEdit(node) {
      console.log('编辑', node);
    }
  }
};
</script>
<style scoped>
.tree-menu {
  margin: 20px;
}

.el-tree-node__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-tree-node__expand-icon {
  margin-right: 10px;
}

.action-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px;
}
</style>