vue element Cascader 级联选择器
(1、下拉框太长;2、选择任意一级选项 点击收起;3、点击label选中)
1、下拉框太长
.el-cascader-panel {
height: 300px;
}`
在全局css中设置下拉框的高度
2、选择任意一级选项 点击收起
watch: {
handlerValue() {
if (this.$refs.refHandle) {
this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
}
}
},
3、点击label选中
(1)在全局css中修改前面圆点的样式,实现点击文字选中
.el-cascader-panel .el-radio {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 10px;
right: 10px;
}
.el-cascader-panel .el-radio__input {
visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}`
(2)消耗性能
mounted() {
//点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡,暂时想不到好方法来触发。
//这种比较耗性能,暂时想不到其他的,能实现效果了。
setInterval(function() {
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click();
};
});
}, 1000);