ElementUI 級聯選擇框 設置最後一級可選及相關問題解決

• 2020 年 7 月 21 日
• 筆記
• ElementUI

在使用 elementUI 的 el-cascader 級聯選擇框進行省市聯動效果時，有這麼一個需求：該級聯選擇框一共有三級結構分別為國家-省份-城市，國家和省份為必選項，城市為可選項。具體實現如下：

el-cascader 設置最後一級可選

1. 可通過 props.checkStrictly = true 來設置父子節點取消選中關聯，從而達到選擇任意一級選項的目的
2. 通過為第一級選項內容設置 disabled 屬性，從而就實現了需求。

**通過循環源數據，找到第一級選項內容，為其設置 disabled 屬性為 true **

  // 設置級聯選擇框第一級數據禁止選中，循環一次即可
  setCascaderDisabled (cityOptions) {
    cityOptions.forEach(item => {
      item.disabled = true
    })
  }

上述內容即可實現基本需求，但是感覺這個el-cascader 還有一些小問題：

• 點擊圓圈後理想是自動收起下拉，但是沒有這樣的效果
• 只能點擊圓圈才能選中，點擊文字 label 沒有效果

點擊圓圈後自動收起下拉

設置每次監聽值變化的時候，把 dropDownVisible 屬性設置為 false 即可。

  watch: {
    // handlerValue 就是存放選中地區的數組
    handlerValue() {
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false; //監聽值發生變化就關閉它
      }
    }
  }

點擊文字 label 顯示選中

方法一：這種比較耗性能，但能實現效果了。

   mounted() {
	//點擊文本就讓它自動點擊前面的input就可以觸發選擇。但是因組件阻止了冒泡，暫時想不到好方法來觸發。
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  }

方法二：方法一的改進，性能上有一定的優化

<el-cascader
省略。。。。。。
    ref="elcascader"
    @visible-change="elCascaderOnlick"
    @expand-change="elCascaderOnlick"
  ></el-cascader>

elCascaderOnlick() {
  let that = this;
  setTimeout(function() {
    document.querySelectorAll(".el-cascader-node__label").forEach(el => {
      el.onclick = function() {
        this.previousElementSibling.click();
        that.$refs.elcascader.dropDownVisible = false;
      };
    });
    document
      .querySelectorAll(".el-cascader-panel .el-radio")
      .forEach(el => {
        el.onclick = function() {
          that.$refs.elcascader.dropDownVisible = false;
        };
      });
  }, 100);
}

隱藏小圓點

小圓點有點丑，使用css隱藏。如果不生效，可以參考如何修改element UI默認樣式

.el-radio {
  color: #606266;
  cursor: pointer;
  visibility: hidden; // 加上這一行
  margin-right: 30px;
}

參考文章：
//www.cnblogs.com/steamed-twisted-roll/p/11744020.html
//blog.csdn.net/qq_36747046/article/details/107159698
//blog.csdn.net/fuhegegnw/article/details/106760978