el-radio-group与el-table联动异常：禁用后无法恢复交互问题咨询

问题成因 #

1. 响应式追踪失效：如果表格数据是直接从后端获取的原始对象，这类对象未被Vue的响应式系统劫持。直接修改item.odIsReturn = 0时，Vue无法感知属性变化，导致视图与数据不同步，radio-group的选中状态无法更新。
2. Element UI组件状态缓存：el-radio-group被禁用时，会内部冻结选中状态的绑定逻辑。后续通过修改odIsDis启用组件时，组件不会主动重新同步v-model的最新值，点击radio按钮无法触发状态更新。
3. 禁用条件逻辑冗余：原禁用条件!row.odIsDis&&row.odIsDis!==null存在歧义，当odIsDis为0时，!0为true触发禁用，但复杂的条件写法可能导致Vue依赖收集偏差，无法精准监听odIsDis变化以更新禁用状态。

更优解决方案 #

方案1：确保数据响应式（推荐）

若表格数据来自后端，初始化时将行对象转为Vue可追踪的响应式对象：

// 假设res.data是接口返回的表格数据
this.tableData = res.data.map(row => ({ ...row })) 
// Vue2环境也可使用Vue.set：
// this.tableData = res.data.map(row => Vue.set({}, '', row))

修改odIsReturn时，确保通过响应式方式更新：

handleIsDisChange(item) {
  if (item.odIsDis === 0) {
    // Vue3直接修改即可，Vue2需用Vue.set(item, 'odIsReturn', 0)
    item.odIsReturn = 0
  }
}

方案2：简化禁用条件，消除逻辑歧义

将odIsReturn列的禁用条件改为更清晰的写法，让Vue能精准监听状态变化：

<el-radio-group v-model="row.odIsReturn" :disabled="row.odIsDis === 0">

方案3：强制同步组件状态（应急方案）

若不想修改数据初始化逻辑，可在修改值后通过nextTick强制更新视图：

handleIsDisChange(item) {
  if (item.odIsDis === 0) {
    item.odIsReturn = 0
    this.$nextTick(() => {
      this.$forceUpdate() // 强制Vue重新渲染组件
    })
  }
}

注意：$forceUpdate会触发整个组件重渲染，性能开销较大，非必要不推荐。

动态key生效的底层原理

给el-radio-group设置动态key（如:key="row.odIsDis + row.odIsReturn"）时，key值变化会触发Vue销毁旧组件实例并创建新实例。新组件会重新读取v-model的最新值并初始化禁用状态，相当于重置了组件内部状态，因此能解决问题。但这种方式通过销毁重建组件实现，性能不如响应式优化方案。

内容的提问来源于stack exchange，提问作者Ginia