ant design vue RadioGroup 切换的实际案例

1. 在 src/views 目录，新建 order_details_simple/order_details_simple.vue 目录及组件

order_details_simple.vue:

<!-- 简单的 RadioGroup 的示例 -->
<template>
  <div>

    <VNavbar></VNavbar>

    <a-card style="width:800px;"
            class="main">

      <a-radio-group @change="paymentWayOnChange"
                     :defaultValue="1">
        <!-- 网银支付 -->
        <div class="panel-A">
          <p>
            <a-radio :value="1">网银支付</a-radio>
          </p>

          <div class="panel-A-Child"
               v-show="paymentWayValue == 1">
            <a-row>
              <a-col :span="8">用户类型：</a-col>
              <a-col :span="16">
                <!-- RadioGroup组合 - 配置式 -->
                <a-radio-group :options="userOptions"
                               @change="userOnChange"
                               :defaultValue="userValue" />
              </a-col>
            </a-row>
            <a-row v-show="isBankCardShow">
              <a-col :span="8">银行卡类型：</a-col>
              <a-col :span="16">
                <!-- RadioGroup组合 - 配置式 -->
                <a-radio-group :options="bankCardOptions"
                               @change="bankCardOnChange"
                               :defaultValue="bankCardValue" />
              </a-col>
            </a-row>
          </div>

        </div>
        <!-- 快捷支付 -->
        <div class="panel-B">
          <p>
            <a-radio :value="2">快捷支付</a-radio>
          </p>

          <div class="panel-B-Child"
               v-show="paymentWayValue == 2">
            this is panel-B-Child
          </div>
        </div>
        <!-- 支付宝支付 -->
        <div class="panel-C">
          <p>
            <a-radio :value="3">支付宝支付</a-radio>
          </p>
        </div>
        <!-- 微信支付 -->
        <div class="panel-D">
          <p>
            <a-radio :value="4">微信支付</a-radio>
          </p>
        </div>

      </a-radio-group>

    </a-card>

  </div>
</template>

<script>

// 用户类型
const userOptions = ['个人用户', '企业用户']
// 银行卡类型
const bankCardOptions = ['储蓄卡', '信用卡/储蓄卡']
export default {
  name: 'order_details_simple',
  data () {
    return {
      paymentWayValue: '1', // 支付方式
      userOptions, // 用户类型
      bankCardOptions, // 银行卡类型
      userValue: '个人用户', // 用户类型默认值为 '个人用户'
      bankCardValue: '储蓄卡', // 银行卡类型默认值为 '储蓄卡'
      isBankCardShow: true // 是否显示银行卡类型
    }
  },
  methods: {
    paymentWayOnChange (e) {
      // 支付方式的切换
      console.log('radio checked', e.target.value)

      // 只能使用v-show
      // 如果选中的是2， 2是快捷支付， 将 value 设置为2
      // if (e.target.value == 1) {
      //   this.paymentWayValue = 1
      // } else if (e.target.value == 2) {
      //   this.paymentWayValue = 2
      // } else if (e.target.value == 3) {
      //   this.paymentWayValue = 3
      // } else if (e.target.value == 4) {
      //   this.paymentWayValue = 4
      // }

      // 可以使用switch case
      switch (e.target.value) {
        case 1:
          this.paymentWayValue = 1
          break
        case 2:
          this.paymentWayValue = 2
          break
        case 3:
          this.paymentWayValue = 3
          break
        case 4:
          this.paymentWayValue = 4
          break
      }
    },
    // 用户类型
    userOnChange (e) {
      console.log(e.target.value)

      // 当用户类型选择 '企业用户'时，隐藏银行卡类型
      // 三元： this.isBankCardShow = e.target.value == '企业用户' ? false : true
      this.isBankCardShow = e.target.value !== '企业用户'
    },
    // 银行卡类型
    bankCardOnChange (e) {
      console.log(e.target.value)
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  margin: 20px auto;
}
.ant-row {
  margin-bottom: 10px;
}
.panel-A {
  width: 700px;
}
</style>

2. 示例图

3. 注意点

关于 Radio 的默认选中：

<a-radio-group @change="paymentWayOnChange" :defaultValue="1" >
    <a-radio :value="1">网银支付</a-radio>
    <a-radio :value="2">快捷支付</a-radio>
    <a-radio :value="3">支付宝支付</a-radio>
    <a-radio :value="4">微信支付</a-radio>
</a-radio-group>

加上 :defaultValue="1",就有默认选中了。

如果加上 v-model="value"， 或者 v-model="paymentWayValue" ，默认选中就会失败。

4. 详细版本

5.参考

ant design vue 官网