要实现即使使用了<td>单元格进行隔开,也能保证只有某一项被选中,其他项取消选中,可以使用v-model指令来绑定选中项的值。

首先,给每个<a-radio>组件添加一个v-model指令,将其值绑定到一个变量(比如selectedValue)上,表示当前选中的项。

<template v-for="children in record[0].children" :key="children.value">
  <td colspan="2" class="col1">
    <a-radio v-if="children.value!=='xx'" v-model="selectedValue" :value="children.value"/>
    <span>{{children.title}}</span>
  </td>
</template>

然后,在data中定义selectedValue变量,并初始化为默认选中的项的值。

data() {
  return {
    selectedValue: '默认选中项的值'
  }
}

这样,无论<a-radio>组件是否被<td>单元格分隔,只要selectedValue的值改变,对应的<a-radio>组件就会被选中,其他项则会取消选中

template v-for=children in record0children key=childrenvalue td colspan=2 class=col1 a-radio v-if=childrenvalue!==xx checked=childrenchange value=childrenvalue spa

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

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