2021-04-28

weixin_46031196

于 2021-04-28 21:59:43 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/weixin_46031196/article/details/116244463

版权

1.1 可以选择cascader的任意级别

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

1.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;
}

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

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