el-cascader全选只要父级数据
时间: 2023-08-19 11:06:34 浏览: 151
你可以使用`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`方法中,我们通过过滤掉含有`-`的节点值,只保留父级节点的数据。这样就可以实现只选取父级数据的功能了。
阅读全文