table勾选不起作用

@TOC新增table项后勾选不起作用

问题描述

这个是前段时间遇到的问题，想了想还是要记下来，这个比较容易混。在使用新增table项的过程中，新增后我默认将此项勾选，勾选不起作用。

问题解决

这个涉及到nextTick的使用，之前用过，但是没有这么清晰的认知，这次却是真给我上课了

options.value.push({ value: 'd', label: '选项D' });

await nextTick(); // 或 nextTick(() => { ... })

checkedList.value.push('d'); // 此时 checkbox D 已存在，选中有效

nextTick

nextTick做前端的应该是早有耳闻，立即获取更新后的DOM。为什么会有nextTick？这个是出于Vue的DOM更新机制，像这种会多次更新DOM的行为，他会将多个DOM合并在一起更新，并不会立即更新。

为什么checkedList.value.push(‘d’)不生效

checkedList.value.push本质上是拿到页面上的DOM，然后去勾选DOM节点，这个时候，DOM还没有被渲染，勾选不到

┌──────────────────────────────┐
│ 你写的代码 │
│------------------------------│
│ options.value.push(…) │
│ checkedList.value.push(…) │ 👈 这里出问题了
└──────────────────────────────┘
↓
────────────────────────────────────────────
🚦 Vue 响应式系统记录更新：

• options.value 变更了

• 需要触发组件重新渲染（v-for 渲染 checkbox）
  ────────────────────────────────────────────
  ↓
  🕒 Vue 把 DOM 更新任务放入 “异步更新队列”
  （稍后用微任务批量执行）

        ↓       ❌ 注意：DOM 还没更新
  

你执行：checkedList.value.push(‘d’)
结果：新 尚未挂载 → 勾选无效

────────────────────────────────────────────
✅ 正确做法：放到 nextTick 中

options.value.push(…);
nextTick(() => {
checkedList.value.push(…); // ✔️ 此时 DOM 已更新，checkbox 已渲染
});
────────────────────────────────────────────
↓
🔁 Vue 在本轮事件循环末尾执行 DOM 更新

• 渲染出来了
• v-model 绑定触发选中状态更新