elementUI級聯選擇器可以選擇任意一級選項


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; //監聽值發生變化就關閉它
      }
    }
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM