業務背景：

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

主要程式碼如下

<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繫結事件，另外繫結前記得銷燬