vxe-radio-group 点击后才回显数据问题解决
问题描述:
在使用 vxe-radio-group 组件时,已经设置了默认值,但是在页面加载时并没有回显该默认值,需要点击一下该组件才会回显。
问题分析:
vxe-radio-group 组件是基于 ElementUI 的 el-radio-group 组件进行封装的,如果没有设置 v-model 属性,则需要手动设置选中的值。而默认值设置只是在渲染时设置的,不会触发组件的选中事件,因此需要手动触发一下选中事件才能回显默认值。
解决方法:
-
在 vxe-radio-group 组件中设置 v-model 属性,该属性会自动将选中的值绑定到 data 中的变量上,从而实现默认值的回显。
-
在页面加载时手动触发 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>
参考文献:
-
ElementUI 官方文档:https://element.eleme.cn/#/zh-CN/component/radio
-
vxe-table 官方文档:https://xuliangzhan_admin.gitee.io/vxe-table/v4/zh/guide/radio.htm
原文地址: http://www.cveoy.top/t/topic/d5mi 著作权归作者所有。请勿转载和采集!