115 lines
2.5 KiB
Java
115 lines
2.5 KiB
Java
<template>
|
|
<a-select
|
|
mode="multiple"
|
|
:placeholder="placeholder"
|
|
:value="arrayValue"
|
|
@change="onChange"
|
|
option-filter-prop="children"
|
|
>
|
|
<a-select-option
|
|
v-for="(item,index) in newOptions"
|
|
:key="index"
|
|
:getPopupContainer="getParentContainer"
|
|
:value="item.value">
|
|
{{ item.text || item.label }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</template>
|
|
|
|
<script>
|
|
//option {label:,value:}
|
|
export default {
|
|
name: 'JSelectMultiple',
|
|
props: {
|
|
placeholder:{
|
|
type: String,
|
|
default:'',
|
|
required: false
|
|
},
|
|
value:{
|
|
type: String,
|
|
required: false
|
|
},
|
|
readOnly:{
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
options:{
|
|
type: Array,
|
|
required: true
|
|
},
|
|
triggerChange:{
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
spliter:{
|
|
type: String,
|
|
required: false,
|
|
default: ','
|
|
},
|
|
popContainer:{
|
|
type:String,
|
|
default:'',
|
|
required:false
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
newOptions:[],
|
|
arrayValue:!this.value?[]:this.value.split(this.spliter) // arrayValue是已选中的数据
|
|
}
|
|
},
|
|
watch:{
|
|
value (val) {
|
|
if(!val){
|
|
this.arrayValue = []
|
|
}else{
|
|
this.arrayValue = this.value.split(this.spliter)
|
|
}
|
|
}
|
|
},
|
|
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
|
|
// }
|
|
// },
|
|
// blur(){
|
|
// this.newOptions = this.options
|
|
// },
|
|
onChange (selectedValue) {
|
|
this.newOptions = this.options
|
|
if(this.triggerChange){
|
|
this.$emit('change', selectedValue.join(this.spliter));
|
|
}else{
|
|
this.$emit('input', selectedValue.join(this.spliter));
|
|
}
|
|
},
|
|
getParentContainer(node){
|
|
if(!this.popContainer){
|
|
return node.parentNode
|
|
}else{
|
|
return document.querySelector(this.popContainer)
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|