vue实现全选删除

实现全选删除的功能，可以按照以下步骤：

1. 定义一个数组来存储要删除的数据。
2. 在表格中添加一个全选框和每行数据的选择框。
3. 绑定全选框的点击事件，将所有行的选择框状态与全选框状态保持一致。
4. 绑定每行数据的选择框的点击事件，将该行数据的选择状态保存到数组中。
5. 绑定删除按钮的点击事件，遍历数组中的每个选择状态为 true 的数据并删除它们。

下面是一个简单的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAll"></th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td><input type="checkbox" v-model="item.checked"></td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="deleteData">删除选中数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      dataList: [
        { name: '张三', age: 20, checked: false },
        { name: '李四', age: 25, checked: false },
        { name: '王五', age: 30, checked: false }
      ]
    };
  },
  methods: {
    // 全选/取消全选
    toggleSelectAll() {
      for (let i = 0; i < this.dataList.length; i++) {
        this.dataList[i].checked = this.selectAll;
      }
    },
    // 删除选中数据
    deleteData() {
      const deletedData = [];
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].checked) {
          deletedData.push(this.dataList[i]);
        }
      }
      for (let i = 0; i < deletedData.length; i++) {
        const index = this.dataList.indexOf(deletedData[i]);
        if (index !== -1) {
          this.dataList.splice(index, 1);
        }
      }
      this.selectAll = false;
    }
  },
  watch: {
    // 监听每行数据的选择框状态，更新全选框状态
    dataList: {
      handler() {
        const checkedCount = this.dataList.filter(item => item.checked).length;
        this.selectAll = checkedCount === this.dataList.length;
      },
      deep: true
    }
  }
};
</script>