<template>
<div class="hello">
<el-select v-model="value" multiple filterable placeholder="请选择" :filter-method="myFilter">
<el-option
v-for="item in tempOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
watch: {
value:{
handler (n) {
console.log('value', n)
if(n.length===0){
this.tempOptions = this.options
}
}
}
},
data () {
return {
options: [{
value: 'bj1',
label: '北京1'
}, {
value: 'bj2',
label: '北京2'
}, {
value: 'bj3',
label: '北京3'
}, {
value: 'bj4',
label: '北京4'
}, {
value: 'bj5',
label: '北京5'
},{
value: 'sh1',
label: '上海1'
}, {
value: 'sh2',
label: '上海2'
}, {
value: 'sh3',
label: '上海3'
}, {
value: 'sh4',
label: '上海4'
}, {
value: 'sh5',
label: '上海5'
}],
tempOptions: [],
value: '',
tempValue: ''
}
},
mounted() {
this.tempOptions = this.options
},
methods: {
myFilter(val) {
this.tempValue = val ? val : this.tempValue
this.tempOptions = this.options.filter(item => {
return item.label.indexOf(this.tempValue) > -1
})
console.log('filter',val)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
vue下拉框多选问题
最新推荐文章于 2024-06-28 09:55:20 发布