使用el-cascader时,同时设置多选和可搜索,搜索并点击选择后,搜索值不会自动清空,需要手动清空的问题。
代码段为:
<el-cascader
ref="cascader"
style="width: 100%;"
v-model="form.paymentCategory"
placeholder="可输入付款类别搜索"
:options="paymentCategoryList"
clearable
filterable
:props="{multiple: true,emitPath:false,}"
:show-all-levels="false"
@change="paymentCategoryChange"></el-cascader>
若同时设置multiple和filterable属性后,在页面中搜索级联选择器的内容,筛选正常工作
但选择下方的选项并失焦级联选择器后,搜索值不会自动删除,而是继续显示在级联选择器中。
此时应在el-cascader的@change事件中设置cascader组件inputValue属性值为’'。
//付款类别选择事件
paymentCategoryChange(item){
this.$refs['cascader'].inputValue = ''
}
此时选择下方搜索数据,搜索值自动清空。
完整代码:
<template>
<el-cascader
ref="cascader"
style="width: 100%;"
v-model="form.paymentCategory"
placeholder="可输入付款类别搜索"
:options="paymentCategoryList"
clearable
filterable
:props="{multiple: true,emitPath:false,}"
:show-all-levels="false"
@change="paymentCategoryChange"></el-cascader>
</template>
<script>
data(){
return{
form:{
paymentCategory:''
},
paymentCategoryList:[]
}
},
methods:{
//付款类别选择事件
paymentCategoryChange(item){
this.$refs['cascader'].inputValue = ''
}
}
</script>