el-cascader 选项框怎么改变

### 修改 `el-cascader` 组件选项框的样式或行为

#### 自定义级联选择器的浮层类名并调整其样式

为了自定义 `el-cascader` 的外观，可以通过设置组件属性 `popper-class` 来指定一个额外的 CSS 类给弹出的选择面板。这允许开发者针对该类编写特定的样式规则来改变默认视觉效果。

对于希望影响整个菜单列表的情况，可以利用 JavaScript 或者 Vue 中的方法获取到所有的列表项节点，并对其进行进一步的操作：

// 获取所有级联菜单下的列表项目
const listItems = document.querySelectorAll('.special-cascader .el-cascader-menu__list');

这里 `.special-cascader` 是通过 `popper-class="special-cascader"` 设置的一个特殊类名[^1]。

#### 启用多选功能

如果需求涉及到允许多个条目的选取，则可以在 props 配置里加入 `{ multiple: true }` 参数以激活此特性。需要注意的是，默认情况下仅最后一层级支持多选；但如果启用了严格模式 (`checkStrictly`)，则每一级别都可以独立被勾选而不必遵循父子关系约束[^2]。

<el-cascader 
    :options="options"
    popper-class="popper-select"
    :props="{ multiple: true, checkStrictly: false }">
</el-cascader>

当设置了 `multiple=true` 和 `checkStrictly=false` 时，意味着只在最底层启用多选逻辑。

#### 去除单选按钮并实现点击即选中

为了让用户体验更加流畅，在某些场景下可能不需要展示显式的单选/复选控件而是直接响应用户的点击事件完成选择动作。此时可通过覆盖原有样式的手段达到隐藏这些输入元件的目的，同时确保交互仍然有效:

/* 移除radio button */
.el-cascader-node .el-radio__inner {
    display:none;
}

另外一种方法是在初始化组件的时候传递参数 `checkStrictly=true` 并配合相应的样式处理，使得各级别的节点都能单独触发选择状态变化而不会自动关联父级或子级的状态更新[^4]。

#### 定制标签呈现方式

最后，若要更深入地控制每一个可选项的表现形式——比如增加图标、更改字体颜色等细节上的优化——那么就需要借助于插槽(slot)机制来自定义渲染函数(render function)，从而完全掌控最终输出的内容结构[^5]:

<!-- 使用具名slot 'default' 来重写 label -->
<template slot-scope="{ node, data }">
    <span>{{ data.customLabel }}</span> <!-- 替换成实际想要显示的文字或其他HTML片段 -->
</template>

<el-cascader 
    :options="options" 
    @change="handleChange" 
    filterable>
        <template slot-scope="{ node, data }">
            <span style="color:red">{{ data.label }}</span>
        </template>
</el-cascader>

上述代码展示了如何使用 scoped slots 对象访问当前节点的信息(`node`, `data`)，并通过内嵌模板语法动态生成带有红色文本的颜色标记作为新的标签内容。