日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

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 = '';
      }
    },
 }

說明

  1. filterable – 實現過濾功能
  2. clearable – 實現清除功能
  3. @focus=“clearData” – 實現獲取焦點清空框里面的數值
  4. @blur=“showData” – 實現失去焦點恢復默認值

高版本的element中已實現了場景一,已沒有場景二這個現象。

原文鏈接:https://blog.csdn.net/migexiaoliang/article/details/124824223

欄目分類
最近更新