element-ui中 Cascader级联选择器实现一级单选,二级多选

这篇博客介绍了如何在Element UI的Cascader组件中实现一级选择器单选,而二级选择器启用多选模式。通过设置props.multiple为true,可以激活多选功能,并通过维护变量value和shareScopeEnd来管理选定的选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

可通过 props.multiple = true 来开启多选模式

 <el-cascader
      v-show="ifxianshi == 1 && paddinglaiyuan"
      ref="myCascader"
      :options="options"
      :props="{ multiple: true, checkStrictly: true }"
      clearable
      collapse-tags
      style="margin-bottom:20px;width:100%"
      @change="getCheckedNodes"
    ></el-cascader>

声明变量:
value: [],
shareScopeEnd: [],

 getCheckedNodes(val)
// 是否与上次的类型相同
      let changeFlag = false
      let<
### 实现 Element UI 级联选择器父项子项单选 为了实现Element UI级联选择器 (Cascader) 中父项支持而子项仅允许单选的功能,可以通过自定义 `props` 属性并结合 JavaScript 控制逻辑来达成目标。 #### 自定义 Cascader 组件配置 ```javascript <template> <el-cascader :options="options" v-model="selectedOptions" :props="cascaderProps" @change="handleChange"> </el-cascader> </template> <script> export default { data() { return { options: [ { value: 'zhinan', label: '指南', children: [] }, { value: 'component', label: '组件', children: [] } ], selectedOptions: [], cascaderProps: { multiple: true, checkStrictly: true // 允许半状态 } }; }, methods: { handleChange(value, selectedData) { const lastLevel = selectedData[selectedData.length - 1]; if (!lastLevel.children || !Array.isArray(lastLevel.children)) { this.selectedOptions = [value[value.length - 1]]; } else { let tempSelected = []; for (const item of this.options) { if (item.value === value[0]) { tempSelected.push(item); } } this.selectedOptions = [...tempSelected.map(i => i.value)]; } } } }; </script> ``` 此代码片段展示了如何设置 `multiple` 和 `checkStrictly` 参数以启用模式下的严格父子关系控制[^1]。当用户择了某个节点时,会触发 `handleChange` 方法,在这里可以根据当前的择路径判断是否为最后一层,并相应调整最终定的结果列表。 对于非叶子节点(即父项),保持其作为数组形式存储;而对于叶子节点,则只保留最后一个被中的项值。这样就实现了期望的行为——父项可,但每个分支下只能有一个子项被中。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值