问题描述:

在使用 vxe-radio-group 组件时,已经设置了默认值,但是在页面加载时并没有回显该默认值,需要点击一下该组件才会回显。

问题分析:

vxe-radio-group 组件是基于 ElementUI 的 el-radio-group 组件进行封装的,如果没有设置 v-model 属性,则需要手动设置选中的值。而默认值设置只是在渲染时设置的,不会触发组件的选中事件,因此需要手动触发一下选中事件才能回显默认值。

解决方法:

  1. 在 vxe-radio-group 组件中设置 v-model 属性,该属性会自动将选中的值绑定到 data 中的变量上,从而实现默认值的回显。

  2. 在页面加载时手动触发 vxe-radio-group 组件的选中事件,使其回显默认值。可以使用 vxe-radio-group 的 ref 属性获取组件实例,然后调用该实例的 $emit 方法触发选中事件即可。

代码示例:

<template>
  <vxe-radio-group v-model="selectedValue" ref="radioGroup">
    <vxe-radio label="A">A</vxe-radio>
    <vxe-radio label="B">B</vxe-radio>
    <vxe-radio label="C">C</vxe-radio>
  </vxe-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 'B'
    }
  },
  mounted() {
    // 手动触发选中事件,使其回显默认值
    this.$refs.radioGroup.$emit('change', this.selectedValue);
  }
}
</script>

参考文献:

  1. ElementUI 官方文档:https://element.eleme.cn/#/zh-CN/component/radio

  2. vxe-table 官方文档:https://xuliangzhan_admin.gitee.io/vxe-table/v4/zh/guide/radio.htm

vxe-radio-group 点击后才回显数据问题解决

原文地址: http://www.cveoy.top/t/topic/d5mi 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录