当前位置：首页 > news >正文

elementui Cascader 级联选择器每个一级节点下只能选择一个节点

news 2026/5/27 14:44:23

在网上找到了一篇文章https://www.jb51.net/javascript/302754q75.htm （可以先看下这个文章，确实给出了很不错的思路）拿到右侧面板id值就能知道对应选项的id值，再触发li标签的孩子标签中的checkbox的点击事件就可以了。但是忽略了一个事情，就是三级的时候面板id都是一样的所以根据索引根本找不到对应的dom。只有二级的时候是有效的看下图对比

都是同一个一级下面面板id虽然不一样，但是之前的9279你通过代码获取到后这个dom是没有了换成了新的8964所以开头那篇文章不能作为最终的解决方法。
最后我准备获取不到dom的时候就去修改值下面是代码

  <el-cascaderref="prouductSysRef":key="cascaderKey"v-model="formData.productSysteminfo":options="productOptions":props="productSystemProps"@change="handleProductChange"><template slot-scope="{ node, data }"><el-popoverplacement="top"trigger="hover":open-delay="1000"><div class="popover-content">{{ data.atlasName }}</div><div slot="reference" class="cascader-node-label">{{ data.atlasName }}</div></el-popover></template></el-cascader>
data(){
return {
cascaderKey:0,productOptions: [],productSystemProps: {value: 'atlasId',label: 'atlasName',children: 'children',lazy: false,multiple: true,checkStrictly: true,leaf: 'leaf'},
}
}// 同一父级下只选一个子级
    handleProductChange(value) {const selectedPaths = this.formData.productSysteminfo || [];// 单班型模式：只能选一个，选中新的取消之前的if (this.singleClassTypeInfo) {if (value && value.length > 1) {const prev = this.prevValue || [];const added = value.find(v => !prev.some(p => JSON.stringify(p) === JSON.stringify(v)));this.prevValue = value;if (added) {this.formData.productSysteminfo = [added];}} else {this.prevValue = [selectedPaths[selectedPaths.length - 1]];}return;}// 多班型模式：每个一级节点下只能选一个，选中新的通过 JS 点击取消同一一级下之前的// 如果是取消勾选触发的二次 change，直接更新 prevValue 并返回if (this.isCancellingItem) {this.isCancellingItem = false;this.prevValue = [...value.filter(p => p.length > 1)];return;}// 过滤掉一级节点的选中项if (!value || !value.length) {this.prevValue = [];return;}const validValue = value.filter(p => p.length > 1);const validPrev = (this.prevValue || []).filter(p => p.length > 1);// 按一级分组const groupByRoot = arr => {const groups = {};for (const path of arr) {const rootId = path[0];if (!groups[rootId]) groups[rootId] = [];groups[rootId].push(path);}return groups;};const currentGroups = groupByRoot(validValue);const prevGroups = groupByRoot(validPrev);console.log(currentGroups, 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc');console.log(prevGroups, 'pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp');// 遍历当前每个一级，找新增项和需要取消的项for (const rootId in currentGroups) {const currentPaths = currentGroups[rootId];const prevPaths = prevGroups[rootId] || [];// 找出新增的项const added = currentPaths.find(v => !prevPaths.some(p => this.isSamePath(p, v)));console.log(added, '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', prevPaths);if (added && prevPaths.length > 0) {// 有新增项，且之前该一级下有选中项，需要取消之前的const toCancel = prevPaths[0];// 通过 JS 点击取消勾选this.cancelCascaderItem(toCancel);// 只处理第一个有变化的，因为取消后会再次触发 changereturn;}}// 没有需要取消的，直接更新 prevValuethis.prevValue = [...validValue];},// 通过 JS 点击取消级联选择器中的勾选
    cancelCascaderItem(path) {this.$nextTick(() => {try {// 获取要取消的项的 atlasId（路径最后一项）const targetId = path[path.length - 1];// 直接通过 atlasId 查找对应的 DOM 元素const labelElement = document.getElementById(targetId);if (labelElement) {// 找到了，向上查找最近的 li，然后找 el-checkboxconst liElement = labelElement.closest('li');if (liElement) {const checkbox = liElement.querySelector('.el-checkbox');if (checkbox) {// 设置标志位，跳过取消勾选触发的二次 change 处理this.isCancellingItem = true;checkbox.click();return;}}}// 找不到 DOM 元素，直接修改值this.cancelByValue(path);} catch (e) {console.error('取消级联选择器勾选失败:', e);this.cancelByValue(path);}});},// 通过直接修改值来取消勾选（当 DOM 操作不可用时）
    cancelByValue(path) {const currentValue = this.formData.productSysteminfo || [];const newValue = currentValue.filter(p => !this.isSamePath(p, path));this.prevValue = [...newValue.filter(p => p.length > 1)];this.formData.productSysteminfo = newValue;// 强制级联选择器重新渲染// ++this.cascaderKey;
    },isSamePath(a, b) {return JSON.stringify(a) === JSON.stringify(b);}
代码层面确实可以准确的每级只选一个。但是还是有个致命bug，级联面板中右侧的部分（即子节点部分），会自动刷新跳转到第一个父级下的子级面板，就是赋值完自动刷新到第一个赋值的节点下面。
因为js取消checkbox就能避免这个问题，但是三级js就解决不了了。无解只能自己再手搓代码改变了。所以只用联级面板自己写el-tag回显内容，可以尝试一下.