element-plus Cascader 级联选择器实现点击文本选择之后懒加载失效

el-cascader 级联选择器

点击文本选中主要是修改radio标签样式，直接上代码

vue

<el-form-item label="区域">
        <el-cascader v-model="queryParams.areaId" ref="cityTree"  @change="queryList()" @visible-change="handleChange()" @expand-change="handleChange()"
          :props="props" popper-class="hiddenRadio" :show-all-levels="false" placeholder="请选择区域" />
 </el-form-item>

css

.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 0px;
  vertical-align: middle;
}

.el-cascader-panel .el-radio__input {
  visibility: hidden;
}

上面都没什么问题，设置

checkStrictly:true

之后去点击发现懒加载失效了，个人推测是由于改了radio样式导致文本lable部分被覆盖，不能触发点击事件，百度了很久都没找到解决办法，可能是个人脸黑触发了这个bug，在此记录一下

解决办法：重新给元素添加事件监听就可以解决  @visible-change事件一定要添加，否则获取不到元素

function handleChange() {
  // 事件监听实现懒加载选择任意一级
  nextTick(function () {
    //获取label
    const labelDoms = document.querySelectorAll('.el-cascader-node .el-cascader-node__label')
    //获取radio
    const radioDoms = document.querySelectorAll('.el-cascader-node .el-radio')
    //由于label是被radio覆盖，所以循环raidoDoms，反之循环labelDoms
    radioDoms.forEach((item, index) => {
      item.removeEventListener('click', function () {
        const labelDom = labelDoms[index] as HTMLElement
        labelDom.click()
      })
      item.addEventListener('click', function () {
        const labelDom = labelDoms[index] as HTMLElement
        labelDom.click()
      })
    })
  })
}

有其他解决方法可以留意让我学习一下，我真的被这个bug恶心了很久