在使用 `el-
cascader` 组件时，如果希望实现 **
选择任意一级选项并支持单选功能**，可以通过配置 `props` 属性来实现这一需求。以下是具体配置方法和实现思路：
### 配置方法
1. **启用 `checkStrictly` 模式**
Element UI 提供了 `checkStrictly` 属性，用于取消父子节点之间的选中关联，从而允许用户单独
选择任意一级的选项。该属性需要通过 `props` 传递，设置为 `true` 即可启用该模式。
```html
<el-
cascader
:props="{ checkStrictly: true }"
:options="options"
></el-
cascader>
```
2. **设置单选模式**
在 `el-
cascader` 中，默认情况下
选择的是最后
一级节点。如果希望允许用户
选择任意一级节点但仍保持单选行为，可以通过绑定 `v-model` 来获取选中的值。
```html
<el-
cascader
v-model="selectedValue"
:props="{ checkStrictly: true }"
:options="options"
></el-
cascader>
```
3. **自定义选项值字段**
如果数据源中的唯一标识字段不是默认的 `value`，可以通过 `props` 中的 `value` 属性指定实际字段名。例如，使用 `id` 作为唯一标识符：
```html
<el-
cascader
v-model="selectedValue"
:props="{ checkStrictly: true, value: 'id' }"
:options="options"
></el-
cascader>
```
4. **移除单选按钮（可选）**
如果希望去除默认的单选按钮样式，可以通过自定义 `popper-class` 属性并结合 CSS 样式进行隐藏。例如：
```html
<el-
cascader
v-model="selectedValue"
:props="{ checkStrictly: true, value: 'id' }"
:options="options"
popper-class="custom-
cascader"
></el-
cascader>
```
在 CSS 中定义 `.custom-
cascader` 类以隐藏单选按钮：
```css
.custom-
cascader .el-radio {
display: none;
}
```
### 代码示例
以下是一个完整的代码示例，展示了如何配置 `el-
cascader` 以支持 **
选择任意一级选项并保持单选功能**：
```html
<template>
<div>
<el-
cascader
v-model="selectedValue"
:props="{ checkStrictly: true, value: 'id' }"
:options="options"
popper-class="custom-
cascader"
></el-
cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: [],
options: [
{
id: 1,
label: '
一级分类',
children: [
{
id: 2,
label: '二级分类',
children: [
{
id: 3,
label: '三级分类'
}
]
}
]
}
]
};
}
};
</script>
<style>
.custom-
cascader .el-radio {
display: none;
}
</style>
```
### 总结
通过设置 `checkStrictly: true` 可以解除父子节点之间的选中依赖，实现
选择任意一级的功能。同时，结合 `v-model` 和 `popper-class`，可以进一步控制选中行为和样式，达到 **单选模式下
选择任意层级** 的效果。如果需要进一步自定义行为，例如点击文字即选中某个节点，可以参考通过 `querySelectorAll`
操作 DOM 元素的方式进行扩展 [^2]。
---
本文介绍如何为Vue框架中的级联选择器组件添加自定义点击事件，通过修改DOM元素并监听点击行为，实现对级联选择器项的选择效果增强。
扫一扫
3933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
