el-cascader 只传父级
时间: 2023-08-09 14:07:40 浏览: 106
您好!对于 el-cascader 组件,如果只传入父级数据,而不传入子级数据,那么子级选项将不会显示。el-cascader 组件需要同时提供父级和子级数据才能正常工作。如果您只有父级数据,可以考虑对数据进行处理,将父级数据作为根节点,并将子级数据作为根节点的子节点,以满足 el-cascader 组件的要求。
相关问题
el-cascader全选只要父级数据
你可以使用`el-cascader`组件的`checkStrictly`属性来实现只选取父级数据的功能。设置`checkStrictly`为`true`后,父级节点的勾选状态不会受到子节点的影响。
下面是一个示例代码:
```vue
<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
:check-strictly="true"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: '1',
label: 'Option 1',
children: [
{
value: '1-1',
label: 'Option 1-1',
children: [
{
value: '1-1-1',
label: 'Option 1-1-1',
},
{
value: '1-1-2',
label: 'Option 1-1-2',
},
],
},
{
value: '1-2',
label: 'Option 1-2',
},
],
},
{
value: '2',
label: 'Option 2',
children: [
{
value: '2-1',
label: 'Option 2-1',
},
{
value: '2-2',
label: 'Option 2-2',
},
],
},
],
};
},
methods: {
handleChange(value) {
// 只获取父级节点的数据
this.selectedOptions = value.filter((item) => !item.includes('-'));
},
},
};
</script>
```
在上述示例中,`selectedOptions`是用来存储选中的节点数据的数组。在`handleChange`方法中,我们通过过滤掉含有`-`的节点值,只保留父级节点的数据。这样就可以实现只选取父级数据的功能了。
el-cascader子级反选父级
你可以使用 `changeOnSelect` 属性来实现 el-cascader 子级反选父级的功能。将 `change-on-select` 设置为 `true`,当选择子级节点时,父级节点也会被自动选中。
以下是一个示例代码:
```html
<el-cascader
:options="options"
v-model="selectedOptions"
change-on-select
></el-cascader>
```
在这个示例中,`options` 是一个包含级联选择器选项的数组,`selectedOptions` 是绑定的选中项数组。
当你选择子级节点时,父级节点也会被选中。这样你就可以实现子级反选父级的效果了。
阅读全文