VueJS实现点击表格行触发复选框勾选方法咨询

嘿，作为Vue新手碰到这个需求太正常啦，完全可以实现点击表格行触发对应复选框勾选的效果，我来帮你调整代码并解释清楚！

修改后的完整代码 #

HTML部分 #

<div id="app">
  <table>
    <tbody>
      <tr v-for="cat in categories" @click="selectCat(cat)">
        <td>
          <input 
            type="checkbox" 
            :value="cat" 
            v-model="selected" 
            @click.stop
          >
        </td>
        <td>{{ cat.code}}</td>
        <td>{{ cat.name }}</td>
      </tr>
    </tbody>
  </table>
  <p>选中的项: {{ selected.map(item => item.name).join(', ') }}</p>
</div>

JavaScript部分 #

new Vue({
  el: '#app',
  data() {
    return {
      categories: [
        { code: 'CAT1', name: '分类1' },
        { code: 'CAT2', name: '分类2' },
        { code: 'CAT3', name: '分类3' }
      ],
      selected: []
    }
  },
  methods: {
    selectCat(cat) {
      // 查找当前分类在选中数组中的索引
      const index = this.selected.findIndex(item => item.code === cat.code);
      if (index > -1) {
        // 已选中，移除取消勾选
        this.selected.splice(index, 1);
      } else {
        // 未选中，添加完成勾选
        this.selected.push(cat);
      }
    }
  }
})

关键细节说明 #

1. 阻止事件冒泡：给复选框加上@click.stop指令，这一步很重要！如果不加的话，点击复选框时会先触发自身的勾选逻辑，接着触发父元素<tr>的点击事件，导致状态被重复切换，出现“点了复选框却没选中”的奇怪现象。
2. 切换选中状态的逻辑：在selectCat方法里，我们通过findIndex判断当前分类是否已经在selected数组中：
   • 若存在，就用splice移除它，对应取消复选框勾选
   • 若不存在，就用push添加它，对应勾选复选框
3. 保持双向绑定同步：复选框的v-model="selected"依然正常生效，不管是点击表格行还是直接点击复选框，都会实时同步selected数组的状态，页面上的选中提示也会跟着更新。

这样调整后，不管点击表格行的哪个区域，都能轻松切换对应复选框的选中状态啦！

内容的提问来源于stack exchange，提问作者Sam Teng Wong