当前位置：首页 > VUE

vue实现全选表格

2026-02-18 09:57:37VUE

Vue实现表格全选功能

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

基础实现

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAll">全选
    <table>
      <tr v-for="(item, index) in tableData" :key="index">
        <td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      if(this.selectAll) {
        this.selectedItems = this.tableData.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    }
  },
  watch: {
    selectedItems(newVal) {
      this.selectAll = newVal.length === this.tableData.length
    }
  }
}
</script>

优化实现

<template>
  <div>
    <input type="checkbox" v-model="allSelected" @change="handleSelectAll">全选
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>
          <input 
            type="checkbox" 
            v-model="selected" 
            :value="item.id"
            @change="handleSingleSelect"
          >
        </td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' }
      ],
      selected: [],
      allSelected: false
    }
  },
  methods: {
    handleSelectAll() {
      this.selected = this.allSelected 
        ? this.items.map(item => item.id) 
        : []
    },
    handleSingleSelect() {
      this.allSelected = this.selected.length === this.items.length
    }
  }
}
</script>

使用计算属性优化

computed: {
  allSelected: {
    get() {
      return this.selected.length === this.items.length
    },
    set(value) {
      this.selected = value 
        ? this.items.map(item => item.id)
        : []
    }
  }
}

分页表格全选实现 对于分页表格，需要额外处理当前页全选和全局全选的区别：

methods: {
  selectCurrentPage() {
    const currentPageIds = this.paginatedData.map(item => item.id)
    const newSelected = [...new Set([...this.selected, ...currentPageIds])]
    this.selected = newSelected
  },
  selectAllPages() {
    const allIds = this.allData.map(item => item.id)
    this.selected = this.selected.length === allIds.length ? [] : allIds
  }
}

注意事项

vue实现全选表格