el-cascader多选并可搜索时,搜索框数据显示异常的问题

使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值