el-radio把radio更换图片

在 Element UI 中，如果你想在 `el-radio` 上替换默认的圆形图标，你可以通过修改其内部的 `input` 元素，并使用 CSS 或者绑定一个自定义的图标。这里是一个简单的示例：

1. **使用内联样式替换图标**：
使用 `style` 属性给 `input[type="radio"]` 添加一个新的背景图像。记得为选中状态和未选中状态分别设置不同的样式。

<el-radio :label="1" style="background-image: url('your-checked-img.png'); background-size: cover;">
  <img src="your-unchecked-img.png" alt="未选中图片">
</el-radio>

2. **使用CSS选择器替换**：
你也可以在外部CSS文件中，通过`:checked`伪类来改变radio按钮的选择状态下的图标。

.el-radio__inner::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('your-checked-img.png');
}

.el-radio__inner:checked::before {
  background-image: url('your-checked-img-selected.png');
}

3. **使用自定义组件**：
如果需要更复杂的功能，如点击切换图标等，你可以创建一个自定义的 Radio 组件，并控制其内部的图片显示。

<template>
  <el-radio
    :label="value"
    @change="onChange"
    :disabled="disabled"
    :class="{ checked: isChecked }"
  >
    <img :src="checkedImg" :alt="checkedAlt" />
  </el-radio>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    checkedImg: {
      type: String,
      required: true
    },
    checkedAlt: {
      type: String,
      default: '默认选中图'
    }
  },
  methods: {
    onChange() {
      this.isChecked = !this.isChecked;
    }
  }
};
</script>