当前位置：首页 > VUE

vue实现table表格全选

2026-01-23 05:35:46VUE

Vue 实现表格全选功能

在 Vue 中实现表格全选功能，可以通过以下方法完成：

数据绑定与状态管理

在 Vue 的 data 中定义表格数据和全选状态：

data() {
  return {
    tableData: [
      { id: 1, name: 'Item 1', selected: false },
      { id: 2, name: 'Item 2', selected: false },
      { id: 3, name: 'Item 3', selected: false }
    ],
    selectAll: false
  }
}

全选复选框逻辑

在模板中添加全选复选框，并绑定 v-model 和 @change 事件：

<input type="checkbox" v-model="selectAll" @change="handleSelectAll">

在 methods 中实现全选逻辑：

methods: {
  handleSelectAll() {
    this.tableData.forEach(item => {
      item.selected = this.selectAll
    })
  }
}

单个复选框逻辑

为表格中的每一行添加复选框，并绑定到对应数据：

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

反向控制全选状态

添加 watcher 监听表格数据变化，自动更新全选状态：

watch: {
  tableData: {
    handler(newVal) {
      this.selectAll = newVal.every(item => item.selected)
    },
    deep: true
  }
}

完整示例代码

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

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ],
      selectAll: false
    }
  },
  methods: {
    handleSelectAll() {
      this.tableData.forEach(item => {
        item.selected = this.selectAll
      })
    }
  },
  watch: {
    tableData: {
      handler(newVal) {
        this.selectAll = newVal.every(item => item.selected)
      },
      deep: true
    }
  }
}
</script>

使用计算属性优化

可以使用计算属性替代 watcher，提高性能：

computed: {
  selectAll: {
    get() {
      return this.tableData.every(item => item.selected)
    },
    set(value) {
      this.tableData.forEach(item => {
        item.selected = value
      })
    }
  }
}