奇葩功能实现：级联选择框组件el-cascader实现同一级的二级只能单选，但是一级可以多选-编程知识

前言：

其实也不能说这个功能奇葩，做项目碰到这种需求也算合理正常，只是确实没有能直接实现这一需求的现成组件。

el-cascader作为级联选择组件，并不能同时支持一级多选，二级单选的功能，只能要么是单选或者多选。

不过既然产品提了这个需求，皱着眉头也得上啊。

实现：

先说下思路，由于一般来讲级联选择框都只需要提交子级的选项，所以先明确emitPath需要设置为false。multiple设置为true。

有了这两个前提，那怎么做呢？

逻辑当然就是监听change事件，通过动态修改el-cascader组件绑定的值的数据，强行不让勾选同一父级下的二级选项。（但是我这边思路优化了下，每次勾选了同一个二级选项之后，取消之前已经勾选的二级选项，具体看后面的代码）

一开始以为很简单，但是做下来发现，坑啊，是真的坑。

直接上代码吧，代码里多加点注释就看的懂了：

先上html的代码：

        <el-cascader:key="cascaderKey"ref="cascaderRef"style="width: 100%":options="groupOptions":props="{value: 'value',label: 'label',multiple: true,emitPath: false,checkStrictly: true,children: 'children'}"class="tree-search"v-model="devGroupIds"@change="(val) => handleCascaderChange(val)"clearablefilterable:show-all-levels="false":collapse-tags="true"/>

这个代码就不多解释了，需要注明的是这里加了这个key，具体原因后面解释，因为这是这个组件最大的坑。

继续上js的代码，主要是handleCascaderChange方法：

    // 切换分组handleCascaderChange(valueArr) {// 判断当前选中的节点的父级节点是否同时存在其他已经勾选的节点if (valueArr.length > 1) {const newArr = valueArr.filter(t => !this.preSelectedGroupIds.includes(t))let indexInAll, indexInCurrentconst newGroupId = newArr[0] || ''let checkedGroupInParentGroup = []let oldCheckedGroupIdInParentGroup = ''// 找到当前新勾选的分组idif (newGroupId) {let parentGroup = []parentGroup = this.groupOptions.find(group => group.children.some(t => t.value === newGroupId))// 通过当前分组id找到所属一级分组for (const group of parentGroup.children) {if (valueArr.includes(group.value)) {checkedGroupInParentGroup.push(group.value) // 找到该一级分组下勾选的二级分组，最多只有两个}if (checkedGroupInParentGroup.length > 1) {break}}// 当前一级分组如果存在多个已经勾选的二级分组if (checkedGroupInParentGroup.length > 1) {checkedGroupInParentGroup.forEach(t => {if (t !== newGroupId) {oldCheckedGroupIdInParentGroup = t // 找到一级分组下不是当前勾选分组的id，也就是之前勾选的二级分组id}})// 找到之前勾选的二级分组id在所有已经勾选的二级分组id中的序号和在当前一级分组下所有二级分组忠的序号indexInAll = valueArr.findIndex(t => t === oldCheckedGroupIdInParentGroup)// indexInCurrent = parentGroup.children.findIndex(t => t.value === oldCheckedGroupIdInParentGroup)// this.$nextTick(() => {//   let panelId = this.$refs.cascaderRef.panel.$refs.menu[1].$el.id  //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板//   let liId = document.getElementById(panelId + '-' + indexInCurrent)//   // 之前勾选的二级分组id对应的元素，删除其被勾选的样式//   // liId.children[0].click()//   liId.children[0].classList.remove('is-checked')//   liId.children[0].children[0].classList.remove('is-checked')// })// 之前勾选的二级分组id需要从已勾选的分组id中移除valueArr.splice(indexInAll, 1)// 将当前选中的新分组id放到第一位，以便重新打开时，可以默认打开面板时打开当前分组const index = valueArr.indexOf(newGroupId)if (index !== -1) {valueArr.unshift(valueArr.splice(index, 1)[0])}this.devGroupIds = valueArr// 由于<el-cascader组件绑定的值修改之后，UI不会更新，这里只能使用动态key的方式，强行让组件再渲染一遍this.cascaderKey ++console.log('cascaderKey', this.cascaderKey)// cascaderKey修改后，组件会重新渲染，这里模拟重新渲染后默认展开数据面板this.$nextTick(() => {const cascader = this.$refs.cascaderRefconst trigger = cascader.$el.querySelector(".el-cascader__tags")trigger.click()})}}}this.preSelectedGroupIds = JSON.parse(JSON.stringify(valueArr))},

这个代码直接拷贝过去就能用了，不谢。

下面来解释下：

定义preSelectedGroupIds这个全局变量，用来存上一次已经勾选够的选项id，所以preSelectedGroupIds的初始值需要获取devGroupIds的初始值，为了回显的时候也能正常使用。

接下来就是每次触发勾选事件后，通过与preSelectedGroupIds比对，就能找到当前勾选的选项是哪个。