el-select 可下拉可搜索可保留

el-select 点击关闭下拉框,内容会清空,只要简单操作,即可保留输入内容!
在这里插入图片描述
1、添加 filter-method 方法

                 <el-select
                    :filterable="true"
                    v-if="item.type === 'select'"
                    v-model="formAdd[item.value]"
                    :placeholder="`请选择${item.placeholder || item.label}`"
                    @change="changeSelect"
                    :filter-method="dataFilter"
                  >
                    <template v-if="item.appointType != 0">
                      <el-option v-for="option in item.children" :key="option.value" :value="option.value" :label="option.label" />
                    </template>
                  </el-select>

2、引入Vue import Vue from ‘vue’ 使用Vue.set 方法双向绑定数据与视图,否则输入框值视图下会被清空。

dataFilter(val) {
    console.log(val, 'dataFilter')
    Vue.set(this.formAdd, 'repairsUserName', val)
  },
### 实现 `el-select` 组件清空搜索功能的方法 为了实现 `el-select` 下框的清空搜索功能,可以采用多种方式来确保用户体验良好并满足业务需求。 #### 使用 `clearable` 属性 Element UI 的 `el-select` 组件自带了一个名为 `clearable` 的属性。当设置此属性,在选择器右侧会出现一个小图标,点击该图标即可清除当前的选择项[^1]。 ```html <el-select clearable filterable :filter-method="(val)=>{$handleMatch(val,'zjlx','label')}" @click.native="$resetOpts('zjlx')" v-model="formData.zjlx" placeholder="请选择"> <el-option v-for="item in zjlx" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> ``` #### 手动重置表单字段 如果需要更复杂的逻辑控制,比如在一个选择变化清空其他关联的选择框,则可以在事件处理程序中手动操作 Vue 数据模型以达到目的[^2]。 ```javascript methods: { handleSelectionChange(selectedItem) { // 假设这里要清空 'goodsId' 字段 this.$set(this.form, 'goodsId', null); // 或者使用以下方法也可以 // this.form.goodsId = ''; } } ``` 对于多选情况下的特殊处理,可以通过监听 `change` 事件,并调用 `$forceUpdate()` 来强制更新视图状态,从而解决可能存在的显示问题[^3]。 ```html <el-select multiple v-model="selectedItems" @change="$forceUpdate()"> <!-- options --> </el-select> ``` 通过上述几种手段之一或组合应用,能够有效地实现在不同场景下对 `el-select` 组件内已选项进行清理的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值