el-cascader级联实现一级菜单单选，二级菜单多选

实现一级菜单单选和二级菜单多选
为了实现在 el-cascader 组件中的一级菜单单选以及二级菜单多选功能，需要调整组件属性设置并编写相应的样式来满足需求。
在 HTML 中定义 el-cascader 的基本结构，并通过绑定选项数据源 options 和配置项 props 来控制其行为：
<el-cascader v-model="selectedValue" :options="menuOptions" :props="cascaderProps" clearable></el-cascader>
登录后复制
对于 JavaScript 或 Vue.js 脚本部分，则需指定 props 属性中的具体参数以适应业务逻辑的要求。这里需要注意的是移除 checkStrictly: true 这一项，以便保持父子节点之间的关联性[^1]：
data() {
return {
selectedValue: [],
menuOptions: [
/* 选项列表 */
],
cascaderProps: {
multiple: false, // 设置为false表示只允许选择叶子节点，默认即为此值
emitPath: true,
expandTrigger: 'hover'
// 不再包含 checkStrictly 字段
}
};
}
登录后复制
为了让用户能够直观地区分哪些级别支持多选操作，在 CSS 方面可以通过自定义类名覆盖默认样式，隐藏不必要的单选框图标，从而达到视觉上的优化效果[^3]：
/* 移除单选框显示 */
.el-cascader-panel .el-radio__input {
display: none;
}

/* 修改箭头位置 */
.el-cascader-panel .el-cascader-node__postfix {
top: 8px !important;
}
登录后复制
当选择了某个父级分类时，子类别会自动被全选；而如果单独勾选了某些子项目，则不会影响到其他同级别的兄弟节点或是更高级别的父目录状态。这种设计模式不仅提高了用户体验度，同时也简化了开发人员的工作流程[^2]。