项目场景:
场景一:初始化的时候展示【全部】,点击后清空可搜索。
如下图为初始化状态:
点击后可直接进行搜索:
场景二:但是低版本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 = '';
}
},
}
说明
- filterable – 实现过滤功能
- clearable – 实现清除功能
- @focus=“clearData” – 实现获取焦点清空框里面的数值
- @blur=“showData” – 实现失去焦点恢复默认值
高版本的element中已实现了场景一,已没有场景二这个现象。