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;
}

參考文章：
http://www.javashuo.com/article/p-tkjxwcry-do.html
https://blog.csdn.net/qq_36747046/article/details/107159698
https://blog.csdn.net/fuhegegnw/article/details/106760978