功能类似单选按钮的组件名称及Vue循环中单选按钮实现咨询

1. 这类组件叫什么？ #

功能和原生单选按钮一致但可自定义样式的组件，一般叫做自定义样式单选按钮（也常直接称「单选按钮组件」）——本质是对原生 <input type="radio"> 做样式封装，让它外观像普通按钮，但核心保持单选互斥的特性。

2. 如何在循环中渲染单选按钮？ #

看你的代码是在Vue表格循环里每行渲染三个单选按钮，推测你是想让同一列的所有单选按钮互斥（比如所有行的radio_a列只能选一个）。这里结合Vue的双向绑定来实现会更简洁，不用手动操作DOM：

给你修改后的实现代码：

<tr v-for="(material, index) in getmaterials" :key="index">
  <td>{{ index+1 }}</td>
  <td>{{ material.product_name }}</td>
  <td>{{ material.qty }}</td>
  <td>{{ material.price }}</td>
  <td>{{ material.budget}}</td>
  <!-- 三列对应三个独立单选组，用v-model绑定选中状态 -->
  <td>
    <input 
      type="radio" 
      name="radio_a" 
      :value="material.id" 
      v-model="selectedRadioA"
    >
  </td>
  <td>
    <input 
      type="radio" 
      name="radio_b" 
      :value="material.id" 
      v-model="selectedRadioB"
    >
  </td>
  <td>
    <input 
      type="radio" 
      name="radio_c" 
      :value="material.id" 
      v-model="selectedRadioC"
    >
  </td>
</tr>

然后在Vue实例的data里定义三个变量来管理选中值：

data() {
  return {
    selectedRadioA: '',
    selectedRadioB: '',
    selectedRadioC: '',
    getmaterials: [] // 你的物料数据
  }
}

同一name属性的单选按钮会自动互斥，v-model还会帮你同步选中的物料ID，后续处理选中数据非常方便。如果你的需求是每行的三个单选按钮互斥（每行只能选一个），只要把name改成每行唯一值即可，比如name="radio_group_${index}"，再调整v-model绑定逻辑就行。

3. 单选按钮必须用div包裹吗？ #

完全不需要！原生<input type="radio">可以直接放在<td>里，就像你原来的代码那样。只有当你需要给单选按钮加自定义样式（比如隐藏原生radio，用伪元素做按钮外观）、或者需要包裹标签文字/其他关联元素时，才需要用div、label等容器，纯粹从功能角度没有强制要求。

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