https://element.eleme.cn/#/zh-CN/component/cascader
這個是elementui官網級聯選擇器的地址,其中選擇任意一級選項的項目是這樣的
這樣的話效果是實現了,但是存在兩個問題:
1、只能點擊圓圈才能選中,點擊文字 label 沒有效果;
2、點擊圓圈后理想是自動收起下拉,但這個是點擊下拉框之外的地方才可以收起。
解決辦法如下,但是原理不太清楚(很慚愧,先記錄下吧)
1、點擊文本就讓它自動點擊前面的input就可以觸發選擇。但是因組件阻止了冒泡,暫時想不到好方法來觸發。(這種比較耗性能,暫時想不到其他的,能實現效果了。)
mounted() {
setInterval(function() {
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click();
};
});
}, 1000);
},
2、設置每次監聽值變化的時候,把 dropDownVisible
屬性設置為 false 即可(在這解釋下handlerValue和$refs.refHandle,handlerValue是v-model綁定的值,ref類似於獲取這個元素,不止table里有ref,其他標簽你都可以用ref,然后通過this.$refs.xxx來獲取,這里ref='refHandle')
watch: {
handlerValue() {
if (this.$refs.refHandle) {
this.$refs.refHandle.dropDownVisible = false; //監聽值發生變化就關閉它
}
}
}