ElementUI-Cascader組件同時支持懶加載和選擇任意一級 問題踩坑

業務背景：

地址選擇，四級聯動，可選任意一級，支持懶加載，雙擊選擇

 

 

 主要代碼如下

<el-cascader
      clearable
      placeholder="請選擇聯系地址"
      @visible-change="visibleChange"
      class="address-cascader"
      :key="cascaderKey"
      v-model="addressIdList"
      :popper-class="popperClass"
      :props="props"
      ref="elCascader"
      @expand-change="bindEvent"
      @change="handleChange"></el-cascader>

 

props: {
          lazy: true,
          checkStrictly: true,
          async lazyLoad(node, resolve) {
            let nodes = []
            const {level, value} = node
            let results = []
            let parentAdminDivId = ''
            if (level === 0) {
              parentAdminDivId = ''
              nodes = await _this.getAddressInfo(adminDivList[level], parentAdminDivId)
            } else{
              // 直轄市特殊處理
              if (level === 1 && (_this.specialCityList.includes(value))) {
                nodes = [{
                  valueDesc: '市轄區',
                  valueNo: _this.zxCityInfo[node.value],
                  adminDivId: node.data.adminDivId
                }]
              } else {
                parentAdminDivId = node.data.adminDivId
                nodes = await _this.getAddressInfo(adminDivList[level], parentAdminDivId)
              }
            }
            results = nodes.map(item => ({
              label: item.valueDesc,
              value: _this.specialCityList.includes(value) ? item.valueNo : item.adminDivId,
              adminDivId: item.adminDivId,
              leaf: level >= _this.cascaderNum
            }))
            resolve(results)
          }
        }

 

如上圖有以下問題
1. Cascader自帶樣式不符合需求標准

2. Cascader設計為點擊單選框選擇，點擊右側箭頭區域加載下一級，不符合交互

3.無法雙擊選擇

樣式問題可以自定義css來覆蓋，但是交互問題無法解決，翻閱很多資料博客都沒有合理的解決方案

后來有天晚上有人托夢給我一個解決方案，經實測，以下方案切實可行

 

 

點擊 el-cascader-node__label的時候，手動觸發radio的點擊事件

具體代碼如下

bindEvent() {
  const _this = this
  this.$nextTick(() => {
    let cascaderDom = document.getElementsByClassName(_this.refName)[0]
    if (cascaderDom) {
      setTimeout(() => {
        let labelDoms = cascaderDom.querySelectorAll('.el-cascader-node .el-cascader-node__label')
        let radioDoms = cascaderDom.querySelectorAll('.el-cascader-node .el-radio__inner')
        if (labelDoms && labelDoms.length) {
          labelDoms.forEach((item, index) => {
            item.addEventListener('click', () => {
              radioDoms[index].click()
            })
          })
          labelDoms.forEach((item) => {
            item.addEventListener('dblclick', () => {
              _this.$refs.elCascader.dropDownVisible = false
            })
          })
        }
      }, 500)
    }
  })
},

核心代碼如上，注：bindEvent的調用時間，每次點擊出現下一級時候都要為label綁定事件，另外綁定前記得銷毀