一、项目中遇到的问题
前端使用Element框架,出现了使用级联选择器只能点击前端小圆框选中的情况,测试小姐姐非常不满意,要求能够点击一整行选中。
二、解决方法
利用Cascader的属性:popper-class(自定义浮层类名),增加CSS解决问题。
<el-form-item label="所属频道" prop="channel">
<div class="elInputM">
<el-cascader
v-model="editForm.channel"
:options="channelList"
:props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'channel_name' }"
clearable
style="width: 100%;"
popper-class="popper" // 这个是重点
>
</el-cascader>
</div>
</el-form-item>
增加对应的CSS
.popper .el-cascader-panel .el-checkbox {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 0px;
right: 0px;
}
.popper .el-cascader-panel .el-checkbox__input {
margin-top: 2px;
margin-left: 8px;
}
.popper .el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
测试发现没问题了,但是这种格式的CSS遇到multiple:false的单选是不生效的,再被测试小姐姐凶了一顿后,增加单选的格式CSS,最后变成:
.popper .el-cascader-panel .el-radio {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 0px;
right: 0px;
}
.popper .el-cascader-panel .el-checkbox {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 0px;
right: 0px;
}
.popper .el-cascader-panel .el-radio__input {
margin-top: 10px;
margin-left: 8px;
}
.popper .el-cascader-panel .el-checkbox__input {
margin-top: 2px;
margin-left: 8px;
}
.popper .el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
搞定,代码仅供参考,祝你们使用顺利。