element-ui中el-select低版本清除选项,el-select 要怎么清空已选的数据,显示最初的 placeholder?

本文介绍如何在低版本Element UI的el-select组件上使用filterable和clearable属性时避免搜索框初始化问题,通过修改代码并设置focus和blur事件来实现清空和恢复默认值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目场景:

场景一:初始化的时候展示【全部】,点击后清空可搜索。
如下图为初始化状态:
在这里插入图片描述
点击后可直接进行搜索:
在这里插入图片描述
场景二:但是低版本element的el-select加上filterable后,点击后会是以下现象:
没点击前:
在这里插入图片描述
点击后:
在这里插入图片描述


解决方案:

为了解决场景二的现象,编辑代码如下:

		<div class="search-item">
            <span>操作分类:</span>
            <el-select 
            	placeholder="全部" 
            	v-model="loggerQueryData.operateType" 
            	style="width: 245px" 
            	filterable 
            	clearable 
            	@focus="clearData" 
            	@blur="showData">
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="item in getOperateType"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
export default {
  data() {
    return {
		loggerQueryData: {
        	operateType: '',
      },
      getOperateType: [],
	};
  },
}
methods: {
    //【操作分类】实现获取焦点清空框里面的数值
    clearData() {
      this.loggerQueryData.operateType = null;
    },
    //【操作分类】实现失去焦点恢复默认值
    showData() {
      if (this.loggerQueryData.operateType == null) {
        this.loggerQueryData.operateType = '';
      }
    },
 }

说明

  1. filterable – 实现过滤功能
  2. clearable – 实现清除功能
  3. @focus=“clearData” – 实现获取焦点清空框里面的数值
  4. @blur=“showData” – 实现失去焦点恢复默认值

高版本的element中已实现了场景一,已没有场景二这个现象。

Element UI 的 `el-select` 组件是一个常用的下拉择组件,它允许用户通过输入筛选项。如果你想实现自定义筛并支持全功能,你可以通过以下几个步骤操作: 1. **绑定数据**: 首先,你需要将需要展示的选项作为数组传入 `el-select` 的 `options` 属性,并保持一个原始未过滤的数据源。 ```html <template> <el-select v-model="selectedValue" filterable placeholder="请择"> <el-option v-for="item in filteredOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { data() { return { options: [ ... // 原始选项数组 ], selectedValue: '', filteredOptions: [] } }, computed: { // 过滤函数可以根据某个字段对原始选项进行筛 filteredOptions() { const searchKey = this.selectedValue.trim(); if (!searchKey) { return this.options; } else { return this.options.filter(item => item.label.includes(searchKey)); } } } } </script> ``` 2. **全功能**: 可以添加一个单独的开关或按钮,当切换到全模式时,遍历所有选项设置 `selectedValue` 为它们的值。取消全清空 `selectedValue` 或将其设为空字符串。 ```html <!-- 添加一个全按钮 --> <template> <div> <el-select v-model="selectedValue" ...> ... </el-select> <button @click="selectAll">全</button> </div> </template> <script> methods: { selectAll() { if (this.options.length > 0) { this.selectedValue = this.options.map(item => item.value).join(','); } else { this.selectedValue = ''; } }, unselectAll() { this.selectedValue = ''; } } </script> ``` 这样,用户就可以在输入框中搜索选项,同时也可以通过全按钮快速择所有项目。记得在实际项目中根据需求调整细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值