如何用Element UI结合CSS类实现带勾选标记的自定义单选框

完全可以通过Element UI配合自定义CSS实现这个效果，下面是具体实现方案：

1. 基础组件结构 #

使用Element UI的el-radio-group和el-radio组件，给目标单选框添加自定义类名（比如custom-radio），方便后续样式定制：

<el-radio-group v-model="selectedOption">
  <el-radio label="opt1" class="custom-radio">选项一</el-radio>
  <el-radio label="opt2" class="custom-radio">选项二</el-radio>
  <el-radio label="opt3" class="custom-radio">选项三</el-radio>
</el-radio-group>

2. 自定义CSS样式 #

通过CSS覆盖Element UI默认的单选框样式，隐藏原生圆形按钮，给选中状态添加✔标记：

/* 隐藏Element默认的单选圆点 */
.custom-radio .el-radio__input .el-radio__inner {
  display: none;
}

/* 自定义单选框基础外观 */
.custom-radio {
  padding: 7px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

/* 未选中时的hover效果 */
.custom-radio:hover {
  border-color: #409eff;
}

/* 选中状态的背景与边框样式 */
.custom-radio.is-checked {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}

/* 给选中项添加✔标记 */
.custom-radio.is-checked::before {
  content: "✔";
  margin-right: 5px;
  font-weight: 600;
}

/* 清除默认标签间距，避免内容偏移 */
.custom-radio .el-radio__label {
  margin-left: 0;
}

3. Vue逻辑绑定 #

在Vue实例中定义绑定变量即可完成交互：

export default {
  data() {
    return {
      selectedOption: ''
    }
  }
}

你可以根据需求调整CSS里的颜色、边框尺寸、内边距等参数，匹配设计图的样式。

内容的提问来源于stack exchange，提问作者Migely