微信公众号可以做网站嘛,网站建设 兼职 外包,wordpress首页文章图片,高质量的高密网站建设最近开发过程中#xff0c;遇到需求测一个需求#xff0c;就是级联选择器#xff0c;需要多选#xff1b;但是第一级是单选#xff1b; 既要单选又要复选。参照网上内容#xff0c;自己整理了一下功能实现#xff1b;
如下图#xff1a; 思路#xff1a;1.把第一层的…最近开发过程中遇到需求测一个需求就是级联选择器需要多选但是第一级是单选 既要单选又要复选。参照网上内容自己整理了一下功能实现
如下图 思路1.把第一层的复选框去掉 2. 在第一层切换的时候如果第一次分类改变了把已有的值清空
代码如下
html部分el-cascader:popper-classfirst-no-check-cascaderv-modelsettingTypeValue:optionstreeData:props{value: id,label: name,children: children,emitPath: false,multiple: true,}:show-all-levelstrueclearableexpand-changechangeSourceType/el-cascadercss部分:// 级联选择器第一级不需要复选框
.first-no-check-cascader {.el-cascader-panel {.el-cascader-menu:first-child {.el-cascader-node {.el-checkbox {display: none !important;}}}}
}函数部分
cascaderTag:[], // 暂存点击时已有的tag
changeSourceType(selectItem) {// 一级分类只能选一个如果一级分类修改了清空已有值if (!this.cascaderTag.includes(selectItem[0])) {this.settingTypeValue [];}this.cascaderTag selectItem;},
参考文章Element UI级联选择器 多选模式下实现同一父级下最多只能选中一个子级_element级联选择器可输入-CSDN博客
