绑定 Vue/Antd 单选按钮组无法应用样式

问题描述

我正在构建一个小型 Vue 组件。当我为单选按钮组写出 HTML 时,它工作得很好。

然后我更改了代码以绑定到数据源,并且奏效了,但是,它失去了样式。

<template>
  <div>

      <!-- This group does not apply the button style -->
      <a-radio-group default-value="A" button-style="solid" :options="data" />
      

      <!-- This group applies the button style perfectly -->
      <a-radio-group default-value="A" button-style="solid">
        <a-radio-button value="a">
          A
        </a-radio-button>
        <a-radio-button value="b">
          B
        </a-radio-button>
        <a-radio-button value="c">
          C
        </a-radio-button>
        <a-radio-button value="d">
          D
        </a-radio-button>
      </a-radio-group>
  </div>
</template>
<script>
const data = [{
  value: 'A',label: 'A',disabled: false,},{
  value: 'B',label: 'B',{
  value: 'C',label: 'C',disabled: true,{
  value: 'D',label: 'D',}]

export default {
  name: 'SystemSelector',data() {
    return {
      data,}
  },mounted() {
  },}
</script>

使用上面的代码,两个单选按钮组都包含项目 A 到 D。两个列表都认选择了项目 A。由于应用了“实体”样式,第一个列表呈现为“普通”单选按钮,而第二个列表呈现为“选项卡”。

为什么我的第一个单选按钮组没有成功应用相同的样式?

解决方法

它并不完美,但这让我大获全胜:

    <template>
      <div>
          <a-radio-group name="SourceSystem" default-value="XXX" @change="onChange" v-
    
        model="selectedSystem" button-style="solid">
                <a-radio-button
                   v-for="(item,index) in data"
                   :key="index"
                   :value="item.value"
                   v-on="{ defaultChecked: item.value==='XXX' ? true : false}"
                   :disabled="item.disabled">
                   {{ item.label }}
                </a-radio-button>
              </a-radio-group>
          </div>
        </template>

这有点逃避,因为我基本上几乎手动绘制列表。

默认值选择仍然不能完美工作(它不会在页面加载时选择默认值),但至少它以我想要的方式呈现列表。