菜单 角色选择更改为树形选择

web/src/view/superAdmin/user/user.vue

@@ -16,18 +16,14 @@
       <el-table-column label="昵称" min-width="150" prop="nickName"></el-table-column>
       <el-table-column label="用户角色" min-width="150">
         <template slot-scope="scope">
-          <el-select
+          <el-cascader
             @change="changeAuthority(scope.row)"
-            placeholder="请选择"
-            v-model="scope.row.authority.authorityId"
-          >
-            <el-option
-              :key="item.authorityId"
-              :label="item.authorityName"
-              :value="item.authorityId"
-              v-for="item in authOptions"
-            ></el-option>
-          </el-select>
+              v-model="scope.row.authority.authorityId"
+              :options="authOptions"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
         </template>
       </el-table-column>
       <el-table-column label="操作" min-width="150">
@@ -82,14 +78,14 @@
           </el-upload>
         </el-form-item>
         <el-form-item label="用户角色" label-width="80px" prop="authorityId">
-          <el-select placeholder="请选择" v-model="userInfo.authorityId">
-            <el-option
-              :key="item.authorityId"
-              :label="item.authorityName"
-              :value="item.authorityId"
-              v-for="item in authOptions"
-            ></el-option>
-          </el-select>
+          <el-cascader
+            @change="changeAuthority(scope.row)"
+              v-model="userInfo.authorityId"
+              :options="authOptions"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
         </el-form-item>
       </el-form>
       <div class="dialog-footer" slot="footer">
@@ -142,23 +138,35 @@ export default {
     ...mapGetters('user', ['token'])
   },
   methods: {
+     setOptions(authData){
+      this.authOptions = []
+      this.setAuthorityOptions(authData,this.authOptions)
+    },
+    setAuthorityOptions(AuthorityData,optionsData){
+      AuthorityData&&AuthorityData.map(item=>{
+        if(item.children.length){
+          const option = {
+            authorityId:item.authorityId,
+            authorityName:item.authorityName,
+            children:[]
+        }
+          this.setAuthorityOptions(item.children,option.children)
+          optionsData.push(option)
+        }else{
+          const option = {
+              authorityId:item.authorityId,
+              authorityName:item.authorityName,
+          }
+          optionsData.push(option)
+        }
+      })
+    },
     async deleteUser(row){
       const res = await deleteUser({id:row.ID})
       if(res.code == 0){
         this.getTableData()
         row.visible = false
       }
-    },
-     getAuthorityList(AuthorityData){
-      AuthorityData.map(item=>{
-        this.authOptions.push({
-          authorityId:item.authorityId,
-          authorityName:item.authorityName
-        })
-        if(item.children){
-          this.getAuthorityList(item.children)
-        }
-      })
     },
     async enterAddUserDialog() {
       this.$refs.userForm.validate(async valid => {
@@ -195,8 +203,7 @@ export default {
   async created() {
     this.getTableData()
     const res = await getAuthorityList({ page: 1, pageSize: 999 })
-    this.authOptions = res.data.list
-    
+    this.setOptions(res.data.list)
   }