级联选择器修改

src/layout/loginPage.vue

@@ -82,8 +82,9 @@
                     <div style="padding-right: 10px; color: #2592a1">班级</div>
                   </div>
                   <div class="right">
-                    <el-cascader placeholder="请选择所属班级" :props="props" style="width: 142%; height: 0.2344rem"
+                    <el-cascader ref="cascader" placeholder="请选择所属班级" :props="props"
-                      v-model="formModel.clssid" @change="handleChange" />
+                      style="width: 142%; height: 0.2344rem" v-model="formModel.clssid" @change="handleChange"
+                      :show-all-levels="false" />
                   </div>
                 </div>
               </el-form-item>
@@ -252,10 +253,10 @@
 <script setup lang="ts">
 // import { ref } from "vue"
 // import { onMounted, reactive, ref, toRefs, watch } from "vue";
-import { ElMessage} from 'element-plus'
+import { ElMessage } from 'element-plus'
 import settingStore from "@/store/modules/setting";
 import { User, Lock, Avatar, Stamp, Grid, Iphone } from "@element-plus/icons-vue";
-import { ref,onMounted} from "vue";
+import { ref, onMounted } from "vue";
 import userStore from "@/store/modules/user";
 import { getCode, sturegister, getFaculties } from '@/api/user'
 import { useRouter } from "vue-router";
@@ -281,7 +282,24 @@ const FacultiesList = ref([])
 const getFacultiesList = async (data: any) => {
   const res: any = await getFaculties(data)
   console.log(res, 'res11')
-  FacultiesList.value = res.result
+  if (data.primaryType == 3){
+    FacultiesList.value = res.result.map((res:any) => {
+      return {
+        value: res.id,
+        label: res.name,
+        isLeaf: true
+      }
+    })
+  }else{
+    FacultiesList.value = res.result.map((res: any) => {
+      return {
+        value: res.id,
+        label: res.name,
+        isLeaf: false
+      }
+    })
+  }
+  
 }
 const deepValues = ref([])
 // 配置部门级联选择器
@@ -289,6 +307,7 @@ const props = {
   lazy: true,
   checkStrictly: true,
   emitPath: false,
+  isLeaf: 'isLeaf',
   async lazyLoad(node: any, resolve: any) {
     console.log(node);
     deepValues.value = node.pathValues
@@ -296,17 +315,32 @@ const props = {
       primaryType: node.level + 1,
       pid: node.value,
     })
-    const nodes = FacultiesList.value.map((item: any) => ({
+    const nodes = FacultiesList.value.map((item: any) => {
-      value: item.id,
+      if (!item.isLeaf) {
-      label: item.name,
+        return {
-    }))
+          value: item.value,
+          label: item.label,
+          isLeaf: item.isLeaf,
+          disabled:true
+        }
+      } else {
+        return {
+          value: item.value,
+          label: item.label,
+          isLeaf: item.isLeaf
+        }
+      }
+    })
+    console.log(nodes,'nodes');
+    
     resolve(nodes)
   },
 }
-
+const cascader = ref(null)
 const handleChange = (e: any) => {
   console.log(e);
   formModel.value.clssid = e
+  cascader.value.togglePopperVisible()
 }
 
 
@@ -441,10 +475,10 @@ const toLogin = () => {
   getcodeinfo();
 }
 
-const clickErrorBtn=()=>{
+const clickErrorBtn = () => {
   console.log('aaa');
 }
-onMounted(()=>{
+onMounted(() => {
   getcodeinfo();
 })
 </script>
@@ -481,11 +515,12 @@ onMounted(()=>{
     align-items: center;
     height: 1000px;
     min-height: 100vh;
+
     // margin: 0;
-    .middle-content{
+    .middle-content {
       position: relative;
       width: 60%;
-      height:80%;
+      height: 80%;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -494,7 +529,8 @@ onMounted(()=>{
       background-position: 59% -7px;
       background-size: 75% auto;
     }
-    .errorBtn{
+
+    .errorBtn {
       position: absolute;
       top: 30px;
       right: 122px;