Vue.js IstTable组件Shift多选复选框状态更新后不渲染问题

问题根源 #

1. 响应式失效：Vue2无法检测到数组对象属性的直接修改（比如props.rows[3].selected = true），导致视图无法同步更新。
2. 多选逻辑漏洞：Shift多选时未处理目标行已选中的情况，误触发了取消选中的默认行为，后续脚本设置的状态无法同步到视图。
3. 调试打印差异：直接打印props.rows显示的是Vue响应式代理对象，控制台会实时刷新状态；JSON.stringify是序列化快照，所以会出现两者不一致的情况，本质还是响应式更新未触发。

修复步骤 #

1. 修复响应式更新问题 #

Vue2中，修改数组对象的深层属性必须通过Vue.set或者重新赋值数组来触发响应式更新，同时要遵循单向数据流原则，不能直接修改props，需通过$emit通知父组件更新数据源：

// 方式1：用Vue.set触发单个属性更新
import Vue from 'vue'
Vue.set(targetRow, 'selected', true)

// 方式2：重新赋值数组（更稳妥，适合批量更新）
const updatedRows = [...this.rows].map((row, idx) => {
  // 按需修改selected状态
  if (/* 你的区间判断条件 */) {
    return {...row, selected: true}
  }
  return row
})
this.$emit('update:rows', updatedRows)

2. 调整Shift多选逻辑 #

在Shift点击时，阻止复选框的默认切换行为，强制将区间内的所有行设为选中状态，避免误取消已选中的项：

handleCheckboxClick(row, currentIndex, event) {
  if (event.shiftKey && this.lastSelectedIndex !== null) {
    // 阻止默认的复选框切换行为
    event.preventDefault()
    
    const [minIdx, maxIdx] = [
      Math.min(this.lastSelectedIndex, currentIndex),
      Math.max(this.lastSelectedIndex, currentIndex)
    ]
    
    // 批量更新区间内的选中状态
    const updatedRows = [...this.rows].map((item, idx) => 
      idx >= minIdx && idx <= maxIdx 
        ? {...item, selected: true} 
        : item
    )
    this.$emit('update:rows', updatedRows)
  } else {
    // 普通点击逻辑：切换当前行选中状态
    const updatedRows = [...this.rows].map((item, idx) => 
      idx === currentIndex 
        ? {...item, selected: !item.selected} 
        : item
    )
    this.$emit('update:rows', updatedRows)
    this.lastSelectedIndex = currentIndex
  }
}

3. 确保IstCheckbox组件的状态绑定正确 #

IstCheckbox要通过checked绑定状态，并用change事件通知父组件更新，避免直接修改props：

<!-- IstCheckbox.vue -->
<template>
  <input 
    type="checkbox" 
    :checked="row.selected" 
    @change="onChange"
  />
</template>

<script>
export default {
  props: ['row'],
  methods: {
    onChange(e) {
      this.$emit('toggle', this.row, e.target.checked)
    }
  }
}
</script>

在IstTable中使用时：

<!-- IstTable.vue -->
<template>
  <table>
    <tr v-for="(row, idx) in rows" :key="idx">
      <td>
        <IstCheckbox 
          :row="row" 
          @toggle="(row, checked) => handleCheckboxClick(row, idx, $event)"
        />
      </td>
      <!-- 其他列 -->
    </tr>
  </table>
</template>

验证效果 #

• 修复后，按住Shift选中区间时，已选中的行不会被误取消
• 修改selected状态后，视图会实时同步更新
• 控制台打印props.rows和JSON.stringify(props.rows)的状态会保持一致

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