班级和项目实现联动效果

src/modules/alumni/views/List.vue

@@ -12,26 +12,7 @@ interface classList {
   list: any[]
 }
 const classListItem = reactive<classList>({ loading: false, page: 1, total: 0, list: [] })
-onMounted(() => {
-  handleGetClassList()
-})
-// 获取班级列表
-const handleGetClassList = () => {
-  const params = {
-    page: classListItem.page,
-    limit: 10000,
-    project_prefix: '',
-    id: '',
-    name: ''
-  }
-  getClassList(params).then((res: any) => {
-    classListItem.list = res.data.data
-  })
-}
-// 刷新页面
-const handleFresh = () => {
-  appList.value?.refetch()
-}
+
 const listOptions = {
   remote: {
     httpRequest: getAlumniList,
@@ -66,14 +47,15 @@ const listOptions = {
       placeholder: '性别',
       options: sexList
     },
-    {
-      prop: 'class_id',
-      slots: 'filter-class'
-    },
     {
       prop: 'project_prefix',
       slots: 'filter-project'
     },
+    {
+      prop: 'class_id',
+      slots: 'filter-class'
+    },
+
     { type: 'select', prop: 'province', slots: 'filter-province' },
     { type: 'select', prop: 'city', slots: 'filter-city' },
     { type: 'select', prop: 'industry', placeholder: '所在行业', options: industryCategoryList },
@@ -87,7 +69,6 @@ const listOptions = {
       align: 'center',
       computed(row: any) {
         return sexList.filter((item: any) => {
-          console.log(item, row.row, 'item')
           if (item.value === row.row.sex) {
             return item
           }
@@ -114,21 +95,61 @@ const listOptions = {
     { label: '操作', slots: 'table-operate', width: 230, align: 'center' }
   ]
 }
+// 筛选项目，匹配班级
+const handleChangeClass = (val: any) => {
+  handleGetClassList(val)
+}
+
+// 获取班级列表
+const handleGetClassList = (val: string) => {
+  const params = {
+    page: classListItem.page,
+    limit: 10000,
+    project_prefix: val,
+    id: '',
+    name: ''
+  }
+  getClassList(params).then((res: any) => {
+    if (listOptions.remote.params.project_prefix !== '') {
+      classListItem.list = res.data.data.filter(
+        (item: any) => item.project_prefix === listOptions.remote.params.project_prefix
+      )
+    } else {
+      classListItem.list = res.data.data
+    }
+  })
+}
+// 刷新页面
+const handleFresh = () => {
+  appList.value?.refetch()
+}
+onMounted(() => {
+  // 获取班级列表
+  handleGetClassList('')
+})
 </script>
 
 <template>
   <AppCard>
     <AppList v-bind="listOptions" ref="appList">
-      <template #filter-class="{ params }">
-        <el-select @change="handleFresh" clearable v-model="params.class_id" placeholder="班级">
-          <el-option v-for="item in classListItem.list" :key="item.id" :label="item.name" :value="item.class_id" />
-        </el-select>
-      </template>
       <template #filter-project="{ params }">
-        <el-select @change="handleFresh" clearable v-model="params.project_prefix" placeholder="项目">
+        <el-select @change="handleChangeClass" clearable v-model="params.project_prefix" placeholder="项目">
           <el-option v-for="item in allPrefixList" :key="item.prefix" :label="item.name" :value="item.prefix" />
         </el-select>
       </template>
+      <template #filter-class="{ params }">
+        <el-select
+          @change="handleFresh"
+          clearable
+          v-model="params.class_id"
+          placeholder="班级"
+          :remote-method="handleGetClassList"
+          filterable
+          remote
+        >
+          <el-option v-for="item in classListItem.list" :key="item.id" :label="item.name" :value="item.class_id" />
+        </el-select>
+      </template>
       <template #filter-province>
         <el-select filterable clearable v-model="provinceValue" @change="handleFresh" placeholder="省份">
           <el-option v-for="item in provinceList" :value="item.label" :key="item.code"></el-option>