Element Cascader 级联选择器： 省市区级联可选择任一级，点击文字即选中标签

看官网！看官网！看官网！官网超有用的 --> Cascader 级联选择器

 Cascader 级联选择器 通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

 

<div class="block">
  <span class="demonstration">单选选择任意一级选项</span>
  <el-cascader
    :options="options"
    :props="{ checkStrictly: true }" // 通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
    clearable></el-cascader>
</div>
<script>
  export default {
    data() {
      return {
        options: [{
          value: 'GD',
          label: '广东省',
          children: [{
            value: 'guangzhoushi',
            label: '广州市',
            children: [{
              value: 'th',
              label: '天河区'
            }, {
              value: 'by',
              label: '白云区'
            }, {
              value: 'yx',
              label: '越秀区'
            }, {
              value: 'hp',
              label: '黄埔区'
            }]
          }]
        }]
      };
    }
  };
</script>

使用props.checkStrictly = true可以选择每一级选项，但是体验感不强，需要点中小圆圈才可以选中，如果项目中使用了懒加载的话，还需要再点击文字加载下一级，这样子体验感很差，又或者客户说我就是不想点那个小圆圈就是想点文字，所以就想着能不能点击文字的同时选中小圆圈呢？请看下面这两个方法。

1. 使用CSS样式

很简单，就是使用css将小圆圈变透明然后覆盖在整个文字上方，点击文字的时候其实是在点击小圈圈。

<style>
/*以下样式将单选框隐藏，并绝对定位与文字内容一样大小，这样点击时可以点击整行文字*/
.el-cascader-panel .el-radio{
 position:absolute;
 z-index:10;
 padding:0 10px;
 width:132px;
 height:34px;
 line-height:34px;
}
.el-cascader-panel .el-radio__input{
 visibility:hidden;
}
.el-cascader-panel .el-input-node__postfix{
 top:10px;
}
</style>

但是 如果使用了懒加载的话，是要点击到文字才加载，但是上面又蒙了一层，点击不到文字，这个时候该怎么办？使用hover触发懒加载，使用 expand-trigger="hover" 这个属性就可以了。

    <el-cascader
      v-model="select"
      :options="options"
      :props="props"
      expand-trigger="hover">
    </el-cascader>

 实现的效果：

2.使用JS，点击文字的时候同时选中小圈圈

 使用定时器的话，会比较耗性能的吧

mounted () {
// 点击文字的时候也自动选择radio标签 
    setInterval(function () {
      document.querySelectorAll('.el-cascader-node__label').forEach(el => {
        el.onclick = function () {
          if (this.previousElementSibling) this.previousElementSibling.click()
        }
      })
    }, 1000)
}