请举例写出elementui 的cascader设置multiple=true和checkstrickly=true,这个时候选中值只获取选中的id,不要选中父级的id,请按照我说的写个例子,数据可以写个默认值vue2.0
时间: 2024-12-13 17:17:47 浏览: 6
jQuery获取选中内容及设置元素属性的方法
Element UI 的 Cascader(级联选择器)组件默认提供了一种多选功能,你可以通过 `multiple` 属性开启。当你同时设置 `checkStrictly` 为 `true` 时,它会确保每次只能选择直接的子节点,不会包含父节点。
下面是一个 Vue 2.0 示例,展示了如何在 `el-cascader` 中配置 multiple 和 checkStrictly,同时获取用户选择的唯一子节点 ID:
```html
<template>
<el-cascader
:options="options"
v-model="selectedIds"
:props="{ checkStrictly: true, multiple: true }"
placeholder="请选择">
</el-cascader>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'parent1', label: '父级1', children: [{ value: 'child1', label: '子节点1' }, { value: 'child2', label: '子节点2' }] },
{ value: 'parent2', label: '父级2', children: [{ value: 'child3', label: '子节点3' }] }
],
selectedIds: [], // 默认为空数组,表示未选中任何节点
};
},
};
</script>
```
在这个例子中,当用户选择 "子节点1" 或 "子节点2",`selectedIds` 将包含这两个子节点的 ID。如果选择的是 "父级1",由于 `checkStrictly` 为 `true`,父节点的 ID 不会被添加到结果中。
阅读全文