VUE 级联多选的方法,任意一级选择

本文详细介绍了在Vue 2.13.0版本中如何使用级联选择器(cascader)组件进行多级选择,并特别讲解了checkStrictly、multiple及emitPath属性的作用,演示了如何仅返回当前节点值。

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

本人使用vue2.13.0版本
首先说vue进行级联选择,可以选择任意一级
其样本如下
在这里插入图片描述
代码部分:

<div class="block">
  <span class="demonstration">单选选择任意一级选项</span>
  <el-cascader
    :options="options"
    :props="{ checkStrictly: true,multiple: true,emitPath:false }"
    clearable></el-cascader>
</div>
<script>
  export default {
    data() {
      return {
      	options:{[value:'xxx',children:[],lable:'xxx'
      			],}
      		}
      	}
<

以上即可,其中options中为树形结构数据,
checkStrictly:true属性表示上下级不会级联进行选择,
multiple: true属性表示开启多选,
emitPath:false 属性表示在选择节点以后,将该节点单独返回------默认为true 时,当选二级节点时,返回的是[一级节点value,二级节点value]
这里将其设置为false时,则当选择二级或者其他等级的节点时,只返回当前节点值,而不是返回数组

### Vue2 中 Cascader 级联选择器回显不显示解决方案 对于 Vue2 的 `el-cascader` 组件,在处理情况下遇到的数据回显问题,主要集中在如何正确配置组件属性以及确保数据结构符合预期。 #### 正确配置组件属性 为了使级联选择器能够正常工作并且回显已有的选择项,需要合理设置 `props` 属性。特别是当使用懒加载模式时,应该关注如下几个重要参数: - **multiple**: 设置为 `true` 表示允许。 - **emitPath**: 如果设为 `false`,则只返回最终定节点的值;如果希望获取完整的路径,则保持默认或自行设定。 - **checkStrictly**: 控制父子节点之间的关联关系,默认行为是父节点展开/折叠会影响其下的所有子节点的状态。此项可以用来打破这种严格的层次依赖,允许单独勾任意级别的节点[^3]。 ```html <template> <div id="app"> <!-- 使用 checkStrictly 来支持更灵活的选择 --> <el-cascader v-model="selectedOptions" :options="allOptions" :props="{ multiple: true, emitPath: false, checkStrictly: true }" @change="handleChange" clearable></el-cascader> </div> </template> <script> export default { data() { return { selectedOptions: [], // 已经被中的条目列表 allOptions: [] // 所有可能的选择项集合 }; }, methods: { handleChange(value) { console.log('Selected:', value); } }, mounted(){ this.allOptions = [ {label:'一级1',value:'level_1'}, ... ]; // 初始化时填充已经存在的选择记录 const existingSelections = [['level_1','sub_level_1'],['level_1','another_sub']]; this.selectedOptions = existingSelections.map(selection => selection.join('/')); } }; </script> ``` 上述代码片段展示了如何通过调整 `props` 参数来优化用户体验,并且在页面初始化阶段预填入之前保存过的用户选择结果。需要注意的是,实际应用中可能还需要考虑异步加载更层级的情况,这通常涉及到自定义请求接口和服务端配合[^4]。 另外,关于 `v-model` 的绑定对象——即用于存储当前状态的对象字段(如上例中的 `selectedOptions`),应当是一个二维数组形式,其中每个内部数组代表一条完整的选择路径。例如:`[['一级1', '二级1'], ['一级1', '二级2']]` 这样的格式有助于更好地匹配和展示已有选择项[^2]。 最后提醒一点,由于不同版本之间可能存在差异,请务必查阅官方文档确认最新版的具体用法和支持特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

灵湖映北辰

年轻人,要讲武德!!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值