elmentui 制作商品规格单选

您可以使用 Element UI 中的 Radio Button 组件来制作商品规格单选。首先，您需要定义一个包含所有规格选项的数组，然后使用 v-for 指令将每个选项渲染为一个 Radio Button。下面是一个简单的示例代码：

<template>
  <div>
    <h2>商品规格</h2>
    <div v-for="(option, index) in options" :key="index">
      <p>{{ option.name }}</p>
      <el-radio-group v-model="selected[index]">
        <el-radio v-for="(item, i) in option.items" :key="i" :label="item">{{ item }}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { name: '颜色', items: ['红色', '蓝色', '绿色'] },
        { name: '尺码', items: ['S', 'M', 'L', 'XL'] },
        { name: '材质', items: ['木质', '金属', '塑料'] }
      ],
      selected: []
    };
  }
};
</script>

在上面的示例代码中，我们定义了一个包含三个规格选项的数组 options。每个选项都有一个名称和多个选项项。我们使用 v-for 指令将每个选项渲染为一个 div，其中包含一个 p 元素用于显示选项名称和一个 el-radio-group 元素用于包含多个 el-radio 元素。对于每个 el-radio 元素，我们使用 v-for 指令将每个选项项渲染为一个 Radio Button。我们使用 v-model 指令将每个 el-radio-group 绑定到 selected 数组中的相应索引。

这样，用户就可以通过单击 Radio Button 来选择商品规格。每个选项的选择结果都将存储在 selected 数组中。您可以根据需要进一步处理这些选择结果。