element-ui 級聯選擇器 下拉框自動收起
阿新 • • 發佈:2020-12-28
背景: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。下面紅圈圈可以切換版本