iview Radio组件她的值不能回填
时间: 2023-12-26 14:06:26 浏览: 82
iview给radio按钮组件加点击事件的实例
如果你使用 iview 的 Radio 组件,它的值确实不能回填。这是因为 iview 的 Radio 组件使用的是受控组件(controlled component),也就是说,它的值是由 `value` 属性控制的。如果你尝试手动修改 `input` 元素的值,它不会改变 `value` 属性的值,从而导致无法回填。
如果你需要让 Radio 组件的值回填,你可以尝试使用非受控组件(uncontrolled component)来实现。以下是一个示例:
```html
<template>
<div>
<RadioGroup ref="radioGroup" v-model="selectedValue">
<Radio v-for="option in options" :key="option.value" :label="option.value">{{option.label}}</Radio>
</RadioGroup>
<Button @click="setSelectedValue">回填选中值</Button>
</div>
</template>
<script>
import { RadioGroup, Radio, Button } from 'view-design';
export default {
components: {
RadioGroup,
Radio,
Button,
},
data() {
return {
options: [
{
label: '选项1',
value: 1,
},
{
label: '选项2',
value: 2,
},
{
label: '选项3',
value: 3,
},
],
selectedValue: undefined,
};
},
methods: {
setSelectedValue() {
const radioGroup = this.$refs.radioGroup;
const selectedValue = radioGroup.$children.find((radio) => radio.checked).value;
this.selectedValue = selectedValue;
},
},
};
</script>
```
在这个示例中,我们使用了非受控的 Radio 组件。在数据中,我们定义了选项数组和选中的值。在模板中,我们使用 `v-for` 来渲染选项,并使用 `selectedValue` 来绑定选中的值。在 `setSelectedValue` 方法中,我们获取了选中的值,并将其赋值给 `selectedValue`,从而实现了回填选中值的功能。
阅读全文