搜索组件初行

src/components/common/select-search.vue

+<template>
+
+    <q-select filled stack-label
+              :option-value="optionValue"
+              :option-label="optionLabel"
+              v-model="vdata_model"
+              ref="DeptTier"
+              :options="newData"
+              :label="label"
+              :class="classStr"
+              :dense ='densetype'
+              emit-value
+              map-options
+              clearable
+              :use-input="useInput"
+              @input="resetSearch"
+              @filter="filterFn"
+              >
+    </q-select>
+</template>
+
+<script>
+    export default {
+        name: "select-search",
+      props: {
+        //样式字符串
+        classStr: {
+          type: String,
+          default: ''
+        },
+        //选中数据
+        vModel:{
+          type: String,
+          default: ''
+        },
+        //下拉的数据
+        Data: {
+          type: Array,
+          default: []
+        },
+
+        densetype:{
+          type: Boolean,
+          default: false
+        },
+        //是否能输入
+        useInput:{
+          type: Boolean,
+          default: false
+        },
+        //选项的值
+        optionValue: {
+          type: String,
+          default: ''
+        },
+        //选项的标签
+        optionLabel: {
+          type: String,
+          default: ''
+        },
+        //名称
+        label:{
+          type: String,
+          default: ''
+        },
+        //指定的下拉 当前是那个下啦模块
+        type:{
+          type: String,
+          default: ''
+        }
+      },
+      data(){
+          return{
+            vdata_model:'',
+            newData:[]
+          }
+      },
+      created(){
+        this.vdata_model = this.vModel;//赋值
+        this.newData = this.Data
+      },
+
+      methods:{
+        resetSearch(){
+          let data= this.vdata_model
+          this.$emit('returnData',data ,this.type);
+        },
+        filterFn(val, update) {
+          update(() => {
+            if (val === '') {
+              this.newData = JSON.parse(JSON.stringify(this.Data))
+            } else {
+              const needle = val.toLowerCase()
+              let that = this
+
+              that.newData=[]
+              that.newData = that.Data.filter(v => v.SName.indexOf(needle) > -1)
+
+            }
+          })
+        },
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/pages/system/dept.vue

@@ -2,10 +2,26 @@
   <div class="page-body">
     <div class="page-search row items-center">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
+<!--        <div class="col-3">-->
+<!--          <q-select @input="resetSearch" filled stack-label option-value="SId" option-label="SName"-->
+<!--            v-model="msg.School_Id" :options="schoolList" label="校区" :dense="false" class="col-6 q-pr-lg q-pb-lg"-->
+<!--            emit-value map-options clearable @clear="resetSearch" />-->
+<!--        </div>-->
         <div class="col-3">
-          <q-select @input="resetSearch" filled stack-label option-value="SId" option-label="SName"
-            v-model="msg.School_Id" :options="schoolList" label="校区" :dense="false" class="col-6 q-pr-lg q-pb-lg"
-            emit-value map-options clearable @clear="resetSearch" />
+          <selectSearch
+            classStr="col-12 q-pr-lg q-pb-lg"
+            :Data='schoolList'
+            optionValue="SId"
+            optionLabel="SName"
+            :densetype="false"
+            :vModel="msg.School_Id"
+            label="校区"
+            @returnData="returnData"
+            :useInput="true"
+            type="1"
+          >
+
+          </selectSearch>
         </div>
         <div class="col-3">
           <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.DeptName"
@@ -75,13 +91,15 @@
   } from '../../api/system/index'
   import deptForm from '../../components/system/dept-form'
   import selectTree from '../../components/common/select-tree'
+  import selectSearch from '../../components/common/select-search'
   export default {
     meta: {
       title: "部门管理"
     },
     components: {
       deptForm,
-      selectTree
+      selectTree,
+      selectSearch
     },
     data() {
       return {
@@ -311,7 +329,15 @@
         }).onCancel(() => {
           obj.Status = obj.Status == 1 ? 0 : 1;
         });
+      },
+      returnData(data,type){
+        if(type==1){
+          this.msg.School_Id = data;
+        }
+        this.resetSearch()
+
       }
+
     }
   }