一、项目中遇到的问题
前端使用Element框架,出现了使用级联选择器只能点击前端小圆框选中的情况,客户不满意,要求能够点击一整行选中。
二、解决方法
利用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 | width : 100% ; |
03 | height : 100% ; |
04 | z-index : 10 ; |
05 | position : absolute ; |
06 | top : 0px ; |
07 | right : 0px ; |
08 | } |
09 | .popper .el-cascader-panel .el-checkbox__input { |
10 | margin-top : 2px ; |
11 | margin-left : 8px ; |
12 | } |
13 | .popper .el-cascader-panel .el-cascader-node__postfix { |
14 | top : 10px ; |
15 | } |
测试发现没问题了,但是这种格式的CSS遇到multiple:false的单选是不生效的,增加单选的格式CSS,最后变成:
01 | .popper .el-cascader-panel .el-radio { |
02 | width : 100% ; |
03 | height : 100% ; |
04 | z-index : 10 ; |
05 | position : absolute ; |
06 | top : 0px ; |
07 | right : 0px ; |
08 | } |
09 | .popper .el-cascader-panel .el-checkbox { |
10 | width : 100% ; |
11 | height : 100% ; |
12 | z-index : 10 ; |
13 | position : absolute ; |
14 | top : 0px ; |
15 | right : 0px ; |
16 | } |
17 | .popper .el-cascader-panel .el-radio__input { |
18 | margin-top : 10px ; |
19 | margin-left : 8px ; |
20 | } |
21 | .popper .el-cascader-panel .el-checkbox__input { |
22 | margin-top : 2px ; |
23 | margin-left : 8px ; |
24 | } |
25 | .popper .el-cascader-panel .el-cascader-node__postfix { |
26 | top : 10px ; |
27 | } |
搞定