el-cascader去掉单选按钮
时间: 2025-04-30 10:49:25 浏览: 19
### 如何在 Element Plus 的 `el-cascader` 中去掉单选按钮并实现多选效果
为了实现在 `el-cascader` 组件中去掉单选按钮的功能,并支持多选的效果,可以通过设置属性 `multiple=true` 和 `checkStrictly=true` 来完成[^2]。以下是具体的配置方法以及注意事项:
#### 属性说明
- **`multiple`:** 设置为 `true` 可以启用多选功能。
- **`checkStrictly`:** 当设置为 `true` 时,父子节点的选择关系不再严格绑定,允许独立选择任意级别的节点。
#### 示例代码
以下是一个完整的示例代码片段,展示如何去掉单选按钮并实现多选效果:
```vue
<template>
<div>
<el-cascader
v-model="selectedValues"
:options="options"
:props="{ multiple: true, checkStrictly: true }"
@change="handleChange"
clearable
/>
</div>
</template>
<script>
export default {
data() {
return {
selectedValues: [], // 多选的值数组
options: [
{
value: 'region1',
label: 'Region One',
children: [
{
value: 'city1_1',
label: 'City One'
},
{
value: 'city1_2',
label: 'City Two'
}
]
},
{
value: 'region2',
label: 'Region Two',
children: [
{
value: 'city2_1',
label: 'City Three'
},
{
value: 'city2_2',
label: 'City Four'
}
]
}
]
};
},
methods: {
handleChange(value) {
console.log('Selected values:', value);
}
}
};
</script>
```
#### 关键点解析
1. **`multiple=true`:** 此属性启用了多选模式,使得用户可以选择多个节点而不仅仅是单一路径上的节点。
2. **`checkStrictly=true`:** 解除了父子节点之间的关联约束,从而实现了在同一级别上也可以进行多选的操作[^3]。
3. **事件处理:** 使用 `@change` 方法监听用户的操作行为,在回调函数中可以获取当前被选中的节点数据[^4]。
#### 注意事项
如果希望隐藏父级复选框,则可以在样式层面自定义 CSS 或者通过插槽来自定义渲染逻辑来达到目的[^1]。
---
###
阅读全文
相关推荐

















