1.vue之复选框选中表格行数据（全选/全不选/部分选）

参考资料：Vue 复选框 checkbox 全选与取消全选 | 菜鸟工具

结果：
（1）全选：

（2）全不选：

（3）部分选

<template>
  <div class="content">
    <div class="main">
      <table border="1">
        <tr>
          <th>
            <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" />
          </th>
          <th>Id</th>
          <th>Name</th>
          <th>Problem</th>
        </tr>
        <tr v-for="(item,index) in testData" :key="index">
          <td>
            <!-- value的值就是v-model的值 -->
            <input type="checkbox" :value="item" v-model="checkedData" />
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{item.problem}}</td>
        </tr>
      </table>
    </div>
    <div class="checks">
      <span>选择的值为:{{checkedData}}
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      checkedData: [],
      testData: [
        { id: 1, name: "a", problem: "问题1" },
        { id: 2, name: "b", problem: "问题2" },
        { id: 3, name: "c", problem: "问题3" },
      ],
    };
  },
  watch: {
    checkedData() {
      if (this.checkedData.length == this.testData.length) {
        //全选
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
  methods: {
    changeAllChecked: function () {
      if (this.checked) {
        //全选
        this.checkedData = this.testData;
      } else {
        this.checkedData = [];
      }
    },
  },
};
</script>

<style scoped>
.content {
  background-color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
}
.main {
  display: flex;
  justify-content: center;
}
table {
  text-align: center;
}
th {
  width: 100px;
}
.checks {
  font-size: 16px;
  text-align: center;
}
</style>