文章目录

  • 一、需求背景
  • 二、实现原理


一、需求背景

最近的需求需要实现级联选择器的一级只支持单选，二三级可以支持多选。对于原生的这个组件来说，并没有这个功能，所以需要自己在组件上进行二次封装。

二、实现原理

监听级联选择器的change事件，该事件的回调函数的参数即为选中的v-model绑定的值，并且利用prop开启多选配置：

const departProps = { multiple: true, label: 'name', children: 'data', value: 'id' };

此时的v-model值为一个数组，数组的第一项则为一级的id，第二项则为二级的id…以此类推。那么利用这个v-model值的特性，声明一个标识符，在触发change事件的时候，将标识符的值设置为数组0项（即第一级的id），然后过滤出符合一级id等于标识符值的v-model绑定值，最后将过滤好的数组重新赋值给v-model绑定值，这样就实现了一级单选（因为不等于标识符的都被过滤掉，自然也就不会勾选中），代码如下：

const index = ref(-1); // 标识符（重要）
const singleChoice = (item) => {
  item.forEach((i) => {
    if (i[0] !== index.value) {
      index.value = i[0];
    }
  }); // 如切换勾选，则让标识符的值等于勾选的父级的value
  const filterd = item.filter((v) => v[0] === index.value); // 过滤出与标识符相符的选项
  baseProjectValue.value.push(...filterd); //baseProjectValue为el-cascader的v-model值
};

样式问题修复：当级联选择器开启多选+折叠时，由于组件并未将hover弹窗插入到根元素下，导致即使对hover弹窗设置了z-index值，它依旧低于父组件的兄弟组件的z-index值，就会出现下图的效果：

element 级联选择器 指定层级 element级联选择器多选_javascript


检查元素可以看到，级联选择器的下拉框z-index是足够大的，但是因为它并没有插到根节点下，而只是插入到当前的级联选择器中，所以想要让其高于 属于其父元素同等级的时间选择器的堆叠上下文 就需要对级联选择器的hover展示下拉框 的父元素设置z-index值，这样即可。