網站首頁 編程語言 正文
element-ui中el-select低版本清除選項,el-select 要怎么清空已選的數據,顯示最初的 placeholder?
作者:migexiaoliang 更新時間: 2022-08-15 編程語言項目場景:
場景一:初始化的時候展示【全部】,點擊后清空可搜索。
如下圖為初始化狀態:
點擊后可直接進行搜索:
場景二:但是低版本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中已實現了場景一,已沒有場景二這個現象。
原文鏈接:https://blog.csdn.net/migexiaoliang/article/details/124824223
相關推薦
- 2023-05-09 Oracle中分割字符串的方法實例代碼_oracle
- 2022-05-17 基于Python編寫簡易文字語音轉換器_python
- 2022-04-12 【debug】TypeError: mel() takes 0 positional argumen
- 2022-07-09 document.write() 的作用*
- 2022-04-18 Taro編譯小程序的時候,就沒有錄音權限,沒有scope.record這個權限
- 2022-09-16 淺析python中5個帶key的內置函數_python
- 2022-05-13 修復Qt程序長時間運行控件停止刷新
- 2022-01-08 解決npm install報錯問題--npm install xxx npm ERR! code E
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支