el-radio单选框样式修改为多选框样式

在Vue.js中使用Element UI库时，可以通过CSS覆盖默认的单选框样式来实现将el-radio组件修改为多选框样式。以下是一个简单的示例：

首先，在组件的<style>标签中添加以下CSS：

/* 隐藏原生的单选框样式 */
.el-radio__input {
  display: none;
}
 
/* 定义新的多选框外观 */
.el-radio {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: #606266;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-color: #fff;
  border-color: #dcdfe6;
  border-radius: 4px;
}
 
/* 当鼠标悬停在多选框上时的样式 */
.el-radio:hover {
  color: #409eff;
  border-color: #409eff;
}
 
/* 选中状态的多选框样式 */
.el-radio__input.is-checked + .el-radio {
  color: #409eff;
  border-color: #409eff;
}
 
/* 自定义的对勾图标 */
.el-radio__input.is-checked .el-radio__inner::after {
  content: '✔';
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

然后，在模板中使用el-radio组件，如下所示：

<template>
  <div>
    <el-radio v-model="radio" label="1">选项A</el-radio>
    <el-radio v-model="radio" label="2">选项B</el-radio>
    <el-radio v-model="radio" label="3">选项C</el-radio>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      radio: '1', // 绑定的值
    };
  },
};
</script>

在这个例子中，我们隐藏了原生的单选框样式，并通过CSS自定义了一个多选框的外观。当用户选中某个多选框时，会有一个内置的对勾图标显示。你可以根据需要调整CSS样式来自定义多选框的外观。