解决element-ui中级联选择器cascader存在的问题

ElementUi中Cascader级联选择器 回调问题解决

1，在开发中使用了Cascader级联选择器，应用于省市联动的效果，发现问题：数据回调时不显示。

2，解决方法：使用ref进行回调处理。

ref需要在使用时定义，为了这里方便获取元素，通过getCheckedNodes()获取选中节点，并获取属性pathLabels返回一个集合，做进一步处理。

this.$refs.cityShow.presentText ="复制";// 首次手动复制

关键词是“presentText”

一、解决级联选择器cascader中的3问题

1、 可以选择cascader的任意级别

template:
<el-cascader :props="defaultProps"></el-cascader> 
 JS->data
 defaultProps: {
 				....
        checkStrictly:true
        ....
 },

2、 隐藏小圆圈问题

核心思路：通过css隐藏小圆圈，并扩大小圆圈的显示范围,然后设置visibility为hidden

.el-cascader-panel .el-radio {
  position: absolute;
  width:100%;
  height:100%;
  // border: 1px solid #f00;
  right:-10px;
}

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

3、 解决点击某个级联项，不折叠问题（dropDownVisibl设置为false）

 template:
 <el-cascader ref="cascaderRef"@change="handleChange"></el-cascader>
 
 JS:
 //级联选择器选择完改变时触发
    async handleChange() {
     this.$refs.cascaderRef.dropDownVisible=false
    },

4、 修改第三方组件库样式穿透问题

修改第三方样式不生效问题解决方案
1.保留现在style scoped标签外，在新建立一个不带scoped的style
2.使用>>>实现样式穿透 不用less或sass情况下
3.使用/deep/实现  通常用在less或sass中