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

一、项目中遇到的问题

        前端使用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;
}

搞定，代码仅供参考，祝你们使用顺利。