Vue.js 中实现每行互斥双复选框（单选逻辑）的完整教程-js教程-PHP中文网

Vue.js 中实现每行互斥双复选框（单选逻辑）的完整教程

本文详解如何在 vue 3（composition api）中为动态表格每行渲染两个复选框，并确保左右复选框互斥选择——选中左侧则自动取消右侧，反之亦然，同时精准绑定当前选中项的 doc_id 和 doc_status。

本文详解如何在 vue 3（composition api）中为动态表格每行渲染两个复选框，并确保左右复选框互斥选择——选中左侧则自动取消右侧，反之亦然，同时精准绑定当前选中项的 doc_id 和 doc_status。

在 Vue 开发中，复选框（<input type="checkbox">）默认支持多选，但业务常需「单行二选一」语义（如“待审核/已通过”状态切换）。此时若直接使用 v-model 绑定同一数组或对象，会因双向绑定机制导致状态冲突或逻辑失控。正确做法是放弃 v-model 的自动同步，改用 @change 手动控制状态与 DOM 同步，并借助唯一标识实现行级隔离。

以下为推荐实现方案（Vue 3 <script setup></script> + 响应式语法）：

抖音下载器(Node.js)

抖音无水印视频下载和文案提取工具

下载

✅ 核心思路

每行两个复选框不共享 v-model，而是分别监听 @change 事件；
通过 index 参数定位当前行数据；
使用 document.getElementById() 精准操作对侧复选框的 checked 状态；
将选中结果统一存入响应式对象 temp_doc_file，结构为 { doc_id: number, doc_status: 0 | 1 }。

✅ 完整代码示例

<script setup>
import { ref } from 'vue'

// 模拟表格数据
const PersonalDocument = ref([
  { doc_id: 1, doc_name: '身份证' },
  { doc_id: 2, doc_name: '学历证书' },
  { doc_id: 3, doc_name: '无犯罪记录证明' }
])

// 存储当前选中项（每行最多一个）
const temp_doc_file = ref({})

// 【关键】处理复选框切换逻辑
function handleStatusChange(index, side) {
  const leftId = `left-${index}`
  const rightId = `right-${index}`
  const leftEl = document.getElementById(leftId)
  const rightEl = document.getElementById(rightId)

  if (!leftEl || !rightEl) return

  if (side === 'left') {
    if (leftEl.checked) {
      // 左侧选中 → 清空右侧、更新状态
      rightEl.checked = false
      temp_doc_file.value = {
        doc_id: PersonalDocument.value[index].doc_id,
        doc_status: 0
      }
    }
  } else if (side === 'right') {
    if (rightEl.checked) {
      // 右侧选中 → 清空左侧、更新状态
      leftEl.checked = false
      temp_doc_file.value = {
        doc_id: PersonalDocument.value[index].doc_id,
        doc_status: 1
      }
    }
  }
}
</script><template><table class="table table-striped">
<thead><tr>
<th>#</th>
        <th>ID</th>
        <th>文件名称</th>
        <th>待提交</th>
        <th>已提交</th>
      </tr></thead>
<tbody><tr v-for="(item, index) in PersonalDocument" :key="item.doc_id">
<th scope="row">{{ index + 1 }}</th>
        <td>{{ item.doc_id }}</td>
        <td>{{ item.doc_name }}</td>
        <td>
          <input type="checkbox" :id="`left-${index}`" class="form-check-input">
</td>
        <td>
          <input type="checkbox" :id="`right-${index}`" class="form-check-input">
</td>
      </tr></tbody>
</table>
<!-- 调试显示当前选中 --><div class="mt-3 p-2 bg-light rounded">
    <strong>当前选中：</strong>
    <code>{{ temp_doc_file }}</code>
  </div>
</template>

⚠️ 注意事项与最佳实践

避免 v-model 误用：切勿将两个复选框 v-model 绑定到同一变量（如 temp_doc_file 数组），否则 Vue 会尝试合并值，破坏互斥逻辑；
ID 唯一性保障：使用 :id="left-${index}" 确保每个复选框 ID 全局唯一，防止跨行干扰；
响应式更新时机：temp_doc_file.value 直接赋值即可触发视图更新，无需 .value = {...} 以外的额外操作；
扩展建议：如需支持“取消选择”，可在 handleStatusChange 中增加判断：当点击已选中的项时，清空 temp_doc_file.value 并重置两个 checkbox；
无障碍优化：建议为每个复选框添加 <label></label> 关联，提升可访问性（例如 <label :for="left-${index}">待提交</label>）。