ElementUI 级联选择框 设置最后一级可选及相关问题解决

时间：2024-01-27 09:24:00

在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时，有这么一个需求：该级联选择框一共有三级结构分别为国家-省份-城市，国家和省份为必选项，城市为可选项。具体实现如下：

el-cascader 设置最后一级可选

  1. 可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
  2. 通过为第一级选项内容设置 disabled 属性，从而就实现了需求。

**通过循环源数据，找到第一级选项内容，为其设置 disabled 属性为 true **

  // 设置级联选择框第一级数据禁止选中，循环一次即可
  setCascaderDisabled (cityOptions) {
    cityOptions.forEach(item => {
      item.disabled = true
    })
  }

上述内容即可实现基本需求，但是感觉这个el-cascader 还有一些小问题：

  • 点击圆圈后理想是自动收起下拉，但是没有这样的效果
  • 只能点击圆圈才能选中，点击文字 label 没有效果

点击圆圈后自动收起下拉

设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。

  watch: {
    // handlerValue 就是存放选中地区的数组
    handlerValue() {
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
      }
    }
  }

点击文字 label 显示选中

方法一：这种比较耗性能，但能实现效果了。

   mounted() {
	//点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法来触发。
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  }

方法二：方法一的改进，性能上有一定的优化

<el-cascader
省略。。。。。。
    ref="elcascader"
    @visible-change="elCascaderOnlick"
    @expand-change="elCascaderOnlick"
  ></el-cascader>

elCascaderOnlick() {
  let that = this;
  setTimeout(function() {
    document.querySelectorAll(".el-cascader-node__label").forEach(el => {
      el.onclick = function() {
        this.previousElementSibling.click();
        that.$refs.elcascader.dropDownVisible = false;
      };
    });
    document
      .querySelectorAll(".el-cascader-panel .el-radio")
      .forEach(el => {
        el.onclick = function() {
          that.$refs.elcascader.dropDownVisible = false;
        };
      });
  }, 100);
}

隐藏小圆点

小圆点有点丑，使用css隐藏。如果不生效，可以参考如何修改element UI默认样式

.el-radio {
  color: #606266;
  cursor: pointer;
  visibility: hidden; // 加上这一行
  margin-right: 30px;
}

参考文章：
https://www.cnblogs.com/steamed-twisted-roll/p/11744020.html
https://blog.csdn.net/qq_36747046/article/details/107159698
https://blog.csdn.net/fuhegegnw/article/details/106760978

相关文章