elmentui 单选制作成自定义按钮

可以通过覆盖 ElementUI 的默认样式来实现自定义单选按钮。首先，你需要定义一个自定义的 CSS 类，例如：

.custom-radio {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 50%;
  cursor: pointer;
}

.custom-radio.checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #409eff;
  border-radius: 50%;
}

然后，在使用 `<el-radio>` 组件时，将 `class` 属性设置为 `custom-radio`，并添加 `v-model` 属性绑定选中状态。例如：

<template>
  <div>
    <el-radio v-model="radio" label="1" class="custom-radio">选项1</el-radio>
    <el-radio v-model="radio" label="2" class="custom-radio">选项2</el-radio>
    <el-radio v-model="radio" label="3" class="custom-radio">选项3</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: '1'
    };
  }
};
</script>

这样，就可以将 ElementUI 的单选按钮样式改为自定义样式了。