el-radio-button加图标

您可以使用 `el-radio-button` 的 `icon` 属性来添加图标。以下是一个示例：

<el-radio-group v-model="selected">
  <el-radio-button label="apple" icon="el-icon-apple"></el-radio-button>
  <el-radio-button label="banana" icon="el-icon-bank-card"></el-radio-button>
  <el-radio-button label="orange" icon="el-icon-sunrise"></el-radio-button>
</el-radio-group>

在上面的示例中，我们使用了 `el-icon-*` 类名来引用 Element UI 提供的图标。您可以根据需要替换为其他合适的图标类名。

相关问题

如何在el-radio-button组件中添加图标？

在Element UI的`el-radio-button`组件中，如果你想添加图标，你可以结合使用`<el-radio>`和自定义的`<i>`标签。这里是一个基本的例子：

<template>
  <el-radio-group v-model="radioValue">
    <el-radio
      label="option1"
      :class="{ 'has-icon': true }"> <!-- 添加一个 class 名称 "has-icon" 来标记有图标的 radio -->
      <i slot="append" class="iconfont icon-you-need-to-replace-with-your-font-class"></i> <!-- 插入图标，替换 "iconfont" 为你的字体图标库的类名 -->
      Option 1
    </el-radio>
    <el-radio
      label="option2"
      >Option 2</el-radio>
  </el-radio-group>
</template>

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

在这个例子中，当`el-radio`被选中时，`.has-icon`这个类会使图标显示出来。你需要确保你已经在CSS中定义了`.has-icon`类下的图标样式。

el-radio-button添加右上角角标

在Ant Design Vue库中，`el-radio-button`组件本身并不直接支持在右上角添加角标（通常用于显示计数或者状态）。如果你想在选中radio按钮时添加一个动态的角标，你可以通过一些组合技巧来实现：

1. 给每个radio按钮关联一个计数值，并维护一个全局的状态（例如：Vue实例的一个data属性或计算属性）来存储总共有多少个可用选项。

2. 当用户选择某个radio时，更新这个全局状态并相应地改变角标的值。

3. 使用第三方UI库如Element Plus的自定义图标功能，或者手动编写CSS样式，在角标元素上显示计数或者状态信息。

4. 可能需要配合v-model绑定选中状态，监听`input`事件来实时更新角标。

如果你想要一个具体的示例代码，可以参考以下伪代码：

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio :label="option.id" @input="onRadioChange">{{ option.name }} <span slot="append">[{{ totalOptions - selectedOptionCount }}]</span></el-radio>
    <!-- ... 遍历options数组 -->
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [], // 这里应该是你的选项数据
      totalOptions: 0,
      selectedOptionCount: 0,
    };
  },
  methods: {
    onRadioChange(value) {
      this.selectedOption = value;
      this.selectedOptionCount++; // 当前选项计数加一
      // 如果你想限制角标范围，可以在这里检查并处理
    }
  },
  mounted() {
    this.totalOptions = this.options.length; // 初始化总选项数
  }
};
</script>