当前位置：首页 > VUE

vue el实现全选

2026-01-19 05:41:23VUE

Vue Element UI 实现全选功能

使用 Vue 和 Element UI 实现表格全选功能，可以通过 el-table 和 el-checkbox 组件结合实现。以下是具体实现方法：

基础全选功能

在表格的列中添加一个全选复选框，并通过 v-model 绑定选中状态。

<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>

  <el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Jane', age: 22 },
        { name: 'Tom', age: 25 }
      ],
      selectAll: false,
      selectedItems: []
    }
  },
  methods: {
    toggleSelectAll(val) {
      this.$refs.multipleTable.toggleAllSelection();
    },
    handleSelectionChange(val) {
      this.selectedItems = val;
      this.selectAll = val.length === this.tableData.length;
    }
  }
}
</script>

分页全选功能

如果表格有分页，需要处理跨页全选逻辑。

<template>
  <el-table
    :data="currentPageData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
  </el-table>

  <el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
  ></el-pagination>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 所有数据
      currentPage: 1,
      pageSize: 10,
      selectAll: false,
      selectedItems: [],
      allSelected: false
    }
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
    total() {
      return this.tableData.length;
    }
  },
  methods: {
    toggleSelectAll(val) {
      if (val) {
        this.currentPageData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
        this.allSelected = true;
      } else {
        this.$refs.multipleTable.clearSelection();
        this.allSelected = false;
      }
    },
    handleSelectionChange(val) {
      this.selectedItems = val;
      this.selectAll = val.length === this.currentPageData.length;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      if (this.allSelected) {
        this.$nextTick(() => {
          this.currentPageData.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          });
        });
      }
    }
  }
}
</script>