vue element Cascader 级联选择器

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);