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

最新推荐文章于 2023-08-31 13:40:47 发布

在下~厉飞雨

最新推荐文章于 2023-08-31 13:40:47 发布

阅读量400

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/mwm2378/article/details/116256688

版权

一.可以选择任意级别

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

二.隐藏选择器小圆圈问题

核心思路：通过css隐藏小圆圈，并扩大小圆圈的显示范围,然后设置visibility为hidden
如果不行的话再写一个style标签不加scope

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

三.解决点击某个级联项，不折叠问题

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