博客

在引入cascader

级联

选择器后，会导致整个级联选择器高度占满页面的情况，我们只需在全局样式中加上如下代码固定下高度即可

.el-scrollbar__wrap {
  height: 300px;
}

此时添加完后却又出现了另一个问题：选择器中每一项中都带有一个圆形按钮，而且只有点击圆形按钮才能实现选中，可以稍作修改

我们只需在全局样式中加上如下代码消除圆形按钮

.el-radio__inner {
  border-radius: 0;
  border: 0;
  width: 170px;
  height: 34px;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: -18px;
  left: -19px;
}
 
.el-radio__input.is-checked .el-radio__inner {
  background: transparent;
}
————————————————
版权声明：本文为CSDN博主「啊都给」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/malone66/article/details/119699674

应用完样式后又发现选择器在选择完选项后不会自动隐藏了（必须手动点击空白处）

此时我们可以添加一个侦听器，选择项一发生改变就关闭它

 watch: {
    selectedKeys() {
      if (this.$refs.refSelect) {
        this.$refs.refSelect.dropDownVisible = false
      }
    }
  }

在此之前我们需要在Cascader标签中添加ref引用

<el-cascader 
    v-model="selectedKeys"
    ref="refSelect"
>   
<el-cascader>

其中

DropDownVisible

：属性指定或检索一个值，该值指示下拉列表是否可见（true：可见，false：不可见）