vue实现全选表格

实现全选表格的基本思路

在Vue中实现表格全选功能，通常需要结合表格的数据绑定和复选框的v-model指令。通过维护一个数组或对象来记录选中状态，可以轻松实现全选、反选等功能。

准备表格数据

假设有一个表格数据数组tableData，每个数据项包含id和name等字段：

data() {
  return {
    tableData: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ],
    selectedItems: [] // 存储选中的项
  }
}

添加全选复选框

在表格的头部添加一个全选复选框，绑定到selectAll计算属性：

<thead>
  <tr>
    <th>
      <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
    </th>
    <th>ID</th>
    <th>Name</th>
  </tr>
</thead>

实现全选逻辑

定义selectAll计算属性和toggleSelectAll方法：

computed: {
  selectAll: {
    get() {
      return this.selectedItems.length === this.tableData.length
    },
    set(value) {
      this.toggleSelectAll(value)
    }
  }
},
methods: {
  toggleSelectAll(checked) {
    this.selectedItems = checked ? [...this.tableData] : []
  }
}

绑定单个复选框

为表格的每一行添加复选框，绑定到selectedItems数组：

<tbody>
  <tr v-for="item in tableData" :key="item.id">
    <td>
      <input 
        type="checkbox" 
        :value="item" 
        v-model="selectedItems"
      >
    </td>
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
  </tr>
</tbody>

优化性能（大数据量）

对于大数据量的表格，使用对象存储选中状态比数组更高效：

data() {
  return {
    selectedItems: {} // 改为对象存储
  }
},
methods: {
  toggleSelectAll(checked) {
    if (checked) {
      this.tableData.forEach(item => {
        this.$set(this.selectedItems, item.id, true)
      })
    } else {
      this.selectedItems = {}
    }
  }
}

对应的复选框绑定方式：

<input 
  type="checkbox" 
  :checked="selectedItems[item.id]" 
  @change="selectedItems[item.id] = $event.target.checked"
>

完整示例代码

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="selectAll">
          </th>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>
            <input 
              type="checkbox" 
              :value="item" 
              v-model="selectedItems"
            >
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.tableData.length
      },
      set(value) {
        this.selectedItems = value ? [...this.tableData] : []
      }
    }
  }
}
</script>