时间戳

首页 > 解决方案 > 绑定 Vue/Antd 单选按钮组无法应用样式

vue.js - 绑定 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',
  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。由于应用了“solid”样式，第一个列表呈现为“普通”单选按钮，而第二个列表呈现为“选项卡”。

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

标签： vue.jsantdv

解决方案

它并不完美，但这让我大部分时间都在那里：

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

这有点小题大做，因为我基本上都是靠手工绘制列表的。

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

推荐阅读