首页 > 建站教程 > 前端框架 >  ElementUI中Cascader级联选择器实现点击文本选中(单选多选均可)正文

ElementUI中Cascader级联选择器实现点击文本选中(单选多选均可)

一、项目中遇到的问题

前端使用Element框架,出现了使用级联选择器只能点击前端小圆框选中的情况,客户不满意,要求能够点击一整行选中。


ElementUI Cascader


二、解决方法

利用Cascader的属性:popper-class(自定义浮层类名),增加CSS解决问题。

01<el-form-item label="所属频道" prop="channel">
02  <div class="elInputM">
03    <el-cascader
04        v-model="editForm.channel"
05        :options="channelList"
06        :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'channel_name' }"
07        clearable
08        style="width: 100%;"
09        popper-class="popper"  // 这个是重点
10     >
11    </el-cascader>
12  </div>
13</el-form-item>


增加对应的CSS

01.popper .el-cascader-panel .el-checkbox {
02  width100%;
03  height100%;
04  z-index10;
05  positionabsolute;
06  top0px;
07  right0px;
08}
09.popper .el-cascader-panel .el-checkbox__input {
10  margin-top2px;
11  margin-left8px;
12}
13.popper .el-cascader-panel .el-cascader-node__postfix {
14  top10px;
15}


测试发现没问题了,但是这种格式的CSS遇到multiple:false的单选是不生效的,增加单选的格式CSS,最后变成:

01.popper .el-cascader-panel .el-radio {
02  width100%;
03  height100%;
04  z-index10;
05  positionabsolute;
06  top0px;
07  right0px;
08}
09.popper .el-cascader-panel .el-checkbox {
10  width100%;
11  height100%;
12  z-index10;
13  positionabsolute;
14  top0px;
15  right0px;
16}
17.popper .el-cascader-panel .el-radio__input {
18  margin-top10px;
19  margin-left8px;
20}
21.popper .el-cascader-panel .el-checkbox__input {
22  margin-top2px;
23  margin-left8px;
24}
25.popper .el-cascader-panel .el-cascader-node__postfix {
26  top10px;
27}


搞定