antd 的那些坑

坑一：按需引入RadioButton时报错

原因：

引入的文件路径是/node_modules/ant-design-vue/es/radio-button/，但是实际的文件在radio下，所以就会报错

解决办法：

import { Row, Col, Radio, RadioGroup,DatePicker } from 'ant-design-vue';
//关键代码
const { Button: RadioButton } = Radio;  
const { RangePicker } = DatePicker;

或者

  import { Radio } from 'ant-design-vue';
  
  export default defineComponent({
    name: 'ApiRadioGroup',
    components: {
      RadioGroup: Radio.Group,
      RadioButton: Radio.Button,
      Radio,
    },
   
    setup(props, { emit }) {
        .......
    }
  });

坑二：使用radio组件时，若radio绑定的值是对象或数组，按钮选中时存在样式问题

今日按钮绑定值为 字符串今日 审查元素之后发现，存在ant-radio-checked类名

本月按钮绑定值为 对象value: {start: '2022-10-01 00:00:00',end: '2022-10-31 23:59:59',}, 审查元素之后发现，缺少ant-radio-wrapper-checked和ant-radio-checked类名

<a-radio-group
    v-if="item.field == 'time'"
    v-model:value="otherSearchForm[item.field]"
    @change="handleChange"
    name="radioGroup">
          <a-radio
               :value="it.value"
               v-for="it in item.componentProps.options"
               :class="{
                  'ant-radio-wrapper-checked':
                   otherSearchForm[item.field].start == it.value.start &&
                   it.value.end == otherSearchForm[item.field].end,
               }">
                    {{ it.label }}
          </a-radio>
</a-radio-group>

使用如上方法之后，还是不行，发现只能给label元素添加上ant-radio-wrapper-checked，span元素缺少ant-radio-checked。考虑使用js获取元素后在添加类名有点麻烦，所以准备把对应的value改为字符串