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

Question

我正在构建一个小型 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',
  disabled: false,
}, {
  value: 'C',
  label: 'C',
  disabled: true,
}, {
  value: 'D',
  label: 'D',
  disabled: true,
}]

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

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

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

Answer 1

它并不完美，但这让我完成了大部分工作：

    <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>

这有点逃避，因为我基本上是用手画列表几乎。

默认值 selection 仍然不能完美工作（它不是 select 页面加载时的默认值），但至少它以我的方式呈现列表想要它。

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

Binding a Vue/Antd radio button group fails to apply styles

vue.js

antdv