页面修改

src/components/course/class-form.vue

@@ -90,9 +90,9 @@
               class="col-6 q-pr-lg q-pb-lg" label="班级名称" :rules="[val => !!val || '请填写班级名称']" />
           </div>
           <div class="col-6">
-            <q-select filled stack-label option-value="CourseId" option-label="CourseName" v-model="objOption.CouseId"
-              ref="CouseId" :options="CourseList" label="关联课程" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
-              map-options @input="changeCourse()" />
+            <q-select filled stack-label use-input option-value="CourseId" option-label="CourseName"
+              v-model="objOption.CouseId" ref="CouseId" :options="CourseList" label="关联课程" :dense="false"
+              class="col-6 q-pr-lg q-pb-lg" emit-value map-options @filter="filterCourse" @input="changeCourse()" />
           </div>
         </div>
         <div class="row wrap">
@@ -442,6 +442,7 @@
         optionTitle: "",
         saveCourseLoading: false,
         CourseList: [], //关联课程下拉数据
+        AllCourseList: [], //所有课程列表
         TeacherList: [], //关联教师下拉数据
         SchoolList: [], //关联校区下拉数据
         ClassRoomList: [], //教室下拉数据
@@ -521,6 +522,16 @@
       this.initObj()
     },
     methods: {
+      filterCourse(val, update) {
+        update(() => {
+          if (val === '') {
+            this.CourseList = JSON.parse(JSON.stringify(this.AllCourseList))
+          } else {
+            const needle = val.toLowerCase()
+            this.CourseList = this.AllCourseList.filter(v => v.CourseName.toLowerCase().indexOf(needle) > -1)
+          }
+        })
+      },
       //选择课程改变事件
       changeCourse() {
         if (this.objOption.CouseId > 0 && this.CourseList && this.CourseList.length > 0) {
@@ -752,6 +763,7 @@
               CourseId: 0
             }
             this.CourseList.unshift(obj);
+            this.AllCourseList = res.Data;
           }
         })
       },