Complete menu create with parent.

src/views/interface/MenuList.vue

@@ -24,13 +24,10 @@
               <a-input v-model="menuToCreate.url" />
             </a-form-item>
             <a-form-item label="上级菜单：">
-              <a-select v-model="menuToCreate.parentId">
+              <menu-select-tree
-                <a-select-option
+                :menus="menus"
-                  v-for="(menu,index) in menus"
+                v-model="menuToCreate.parentId"
-                  :key="index"
+              />
-                  :value="menu.id"
-                >{{ menu.name }}</a-select-option>
-              </a-select>
             </a-form-item>
             <a-form-item label="排序编号：">
               <a-input
@@ -120,6 +117,7 @@
 </template>
 
 <script>
+import MenuSelectTree from './components/MenuSelectTree'
 import menuApi from '@/api/menu'
 const columns = [
   {
@@ -146,6 +144,7 @@ const columns = [
   }
 ]
 export default {
+  components: { MenuSelectTree },
   data() {
     return {
       data: [],

src/views/interface/components/MenuSelectTree.vue

@@ -0,0 +1,56 @@
+<template>
+  <a-tree-select
+    :treeData="menuTreeData"
+    placeholder="请选择上级菜单，默认为顶级菜单"
+    treeDefaultExpandAll
+    :treeDataSimpleMode="true"
+    :allowClear="true"
+    @change="handleSelectionChange"
+  >
+  </a-tree-select>
+</template>
+
+<script>
+export default {
+  name: 'MenuSelectTree',
+  model: {
+    prop: 'menuId',
+    event: 'change'
+  },
+  props: {
+    menuId: {
+      type: Number,
+      required: true,
+      default: 0
+    },
+    menus: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  computed: {
+    menuTreeData() {
+      return this.menus.map(menu => {
+        return {
+          id: menu.id,
+          title: menu.name,
+          value: menu.id.toString(),
+          pId: menu.parentId
+        }
+      })
+    }
+  },
+  methods: {
+    handleSelectionChange(value, label, extra) {
+      this.$log.debug('value: ', value)
+      this.$log.debug('label: ', label)
+      this.$log.debug('extra: ', extra)
+      this.$emit('change', value ? parseInt(value) : 0)
+    }
+  }
+}
+</script>
+
+<style>
+</style>