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

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

一、项目中遇到的问题

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


ElementUI Cascader


二、解决方法

利用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;
}


搞定