1.拿到需求要实现级联选择器并且可以选择任意一级。运用elementUi 的cascader 组件，这个组件默认情况下是严格遵守父子节点互相关联的。要实现可以选择任意一级，那就要给任意一级设置可选择属性。官网提供的:props="{ checkStrictly: true }"解除父子节点互相关联。
WX20200528-143914@2x.png
2.问题来了。。。
设计师不想要前面的单选按钮，并且直接点击lable即可选中效果。
（1）想办法把单选按钮拿掉，第一时间想到的办法就是css将其隐藏
.el-radio {
color: #606266;
cursor: pointer;
visibility: hidden; // 加上这一行
margin-right: 30px;
}
（2）怎么让点击文字也有选中效果呢，翻了官网没有提到。。去瞅源码吧
image.png
原来change事件是注册在radio上的
image.png
而redio后面的这个span并没有注册事件
那只要在span上手动注册组件去调用radio的事件就行了
mounted () {
setInterval(function () {
document.querySelectorAll('.el-cascader-node__label').forEach(el => {
el.onclick = function () {
if (this.previousElementSibling) this.previousElementSibling.click()
}
})
}, 1000)
},
到这里大功告成
效果。。。。
image.png
结果又遇到了另一个问题，果然坑真的多、、、、
理想状态下，是选中之后下拉马上收起，但是现有的组件不支持
网上找了很多办法说把 dropDownVisible 属性设置为 false 即可，我亲自尝试了很多次，根本无效，不知道那些大神们是怎么起到作用的
this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
以上代码亲测无效。。。
暂时没找到这个问题的比较好的解决办法，为了收起下拉框，我在选中后加了一个二次确认框，完美的避开了这个问题，哈哈哈、、、
