element Cascader 点击文字选中+选中隐藏+多选

element Cascader 级联选择器只能通过点击文字前边的icon选中,且选中后选择框不会隐藏

现在的需求是可以选中任意一级,需要点击文字选中且选中后选择框隐藏

HTML结构


                  
  

选中隐藏选择框

通过ref实现隐藏

/**
     * 组织者点击选择隐藏选择框
     */
    organizerUnit(a) {
      if (this.$refs.organizerUnit) {
        this.$refs.organizerUnit.dropDownVisible = false
      }
    },

点击文字选中

方案一:setInterval

 // 因组件阻止了冒泡 点击文本就让它自动点击前面的input就可以触发选择。【记得卸载】
 this.ElementSibling = setInterval(function() {
          if (document.querySelectorAll('.el-cascader-node__label').length) {
            document
              .querySelectorAll('.el-cascader-node__label')
              .forEach(el => {
                el.onclick = function() {
                  if (this.previousElementSibling) {
                    this.previousElementSibling.click()
                  }
                }
              })
          }
        }, 1000)

方案二:css

 .el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    /* margin-right: 10px; */
    /* right: 10px; */
  }
.el-cascader-node__label{
  margin-left: 10px;
}
    /* 这个样式针对IE有用,不考虑IE的可以不用管*/
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }
// setInterval比较耗性能,css会污染全局。具体选择哪种,根据项目环境决定

你可能感兴趣的:(vue,javascript)