j-select-multiple改为可检索的多选下拉框

jero-web/src/components/jero/JSelectMultiple.vue

@@ -1,7 +1,14 @@
 <template>
-  <a-select :value="arrayValue" @change="onChange" mode="multiple" :placeholder="placeholder">
+  <a-select
+    mode="multiple"
+    :placeholder="placeholder"
+    :value="arrayValue"
+    @change="onChange"
+    @search="search"
+    :filterOption="false"
+  >
     <a-select-option
-      v-for="(item,index) in options"
+      v-for="(item,index) in newOptions"
       :key="index"
       :getPopupContainer="getParentContainer"
       :value="item.value">
@@ -51,7 +58,8 @@
     },
     data(){
       return {
-        arrayValue:!this.value?[]:this.value.split(this.spliter)
+        newOptions:[],
+        arrayValue:!this.value?[]:this.value.split(this.spliter) // arrayValue是已选中的数据
       }
     },
     watch:{
@@ -63,8 +71,28 @@
         }
       }
     },
+    created(){
+      this.newOptions = this.options
+    },
     methods:{
+      search(val){
+        let newArr = []
+        this.newOptions = this.options
+        if (this.options && this.options.length > 0){
+          this.options.forEach((item,index)=>{
+            if (item.text.indexOf(val) != -1){
+              newArr.push(item)
+            }
+          })
+          this.$nextTick(()=>{
+            this.newOptions = newArr
+          })
+        }else {
+          this.newOptions = this.options
+        }
+      },
       onChange (selectedValue) {
+        this.newOptions = this.options
         if(this.triggerChange){
           this.$emit('change', selectedValue.join(this.spliter));
         }else{

jero-web/src/components/jero/index.js

@@ -30,7 +30,6 @@ import JTreeTable from './JTreeTable.vue'
 //jerobiz
 import JSelectDepart from '../jerobiz/JSelectDepart.vue'
 import JSelectMultiUser from '../jerobiz/JSelectMultiUser.vue'
-import JSelectPosition from '../jerobiz/JSelectPosition.vue'
 import JSelectRole from '../jerobiz/JSelectRole.vue'
 import JSelectUserByDep from '../jerobiz/JSelectUserByDep.vue'
 
@@ -68,7 +67,6 @@ export default {
     //jerobiz
     Vue.component('JSelectDepart', JSelectDepart)
     Vue.component('JSelectMultiUser', JSelectMultiUser)
-    Vue.component('JSelectPosition', JSelectPosition)
     Vue.component('JSelectRole', JSelectRole)
     Vue.component('JSelectUserByDep', JSelectUserByDep)
   }