1. 程式人生 > 實用技巧 >element-ui 級聯選擇器 下拉框自動收起

element-ui 級聯選擇器 下拉框自動收起

背景:vue專案,使用的element-ui版本是2.13.2。使用element的 "Cascader 級聯選擇器" ,並且要求可以選擇任意一級選項,即新增:props="{ checkStrictly: true }"

問題:選中文字時,下拉框不會自動回收

解決:cascader 有一個屬性是dropDownVisible,可以用console除錯發現。這個屬性就是表示下拉框的隱藏(false)和開啟(true).具體做法如下:

  1.新增ref屬性

  

  2.新增如下程式碼【專案用的TS,所以寫法如圖片所示,如果是JS,就改成如下程式碼】

this.$refs.cascaderHandle.dropDownVisible = false;

  

  3.注意,如果同一個頁面中有多個級聯選擇器,一定不要用同樣的ref,ref的屬性值的名稱都不能相同。

擴充套件:

1.在使用element-ui元件時,一定要根據element的相應版本進行引入。例如,如果使用的版本是2.13.2,那就不能用2.10.1。下面紅圈圈可以切換版本