当前位置：首页 > VUE

vue表格实现多选

2026-03-10 10:46:02VUE

实现多选表格的基本方法

在Vue中实现表格多选功能，可以通过结合el-table组件（Element UI）或手动实现复选框逻辑完成。

安装Element UI（若未安装）：

npm install element-ui

引入组件并绑定多选功能：

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

<script>
export default {
  data() {
    return {
      tableData: [{ name: '张三' }, { name: '李四' }],
      selectedItems: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val;
    }
  }
};
</script>

自定义复选框实现

若需自定义样式或逻辑，可通过手动绑定v-model实现：

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ id: 1, name: '王五' }, { id: 2, name: '赵六' }],
      selectedItems: []
    };
  }
};
</script>

全选/反选功能

添加全选按钮时，需监听全选状态变化：

<template>
  <el-checkbox v-model="selectAll" @change="toggleAllSelection">全选</el-checkbox>
  <el-table ref="multipleTable" :data="tableData">
    <el-table-column type="selection" width="55"></el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    toggleAllSelection(val) {
      val ? this.$refs.multipleTable.toggleAllSelection() 
          : this.$refs.multipleTable.clearSelection();
    }
  }
};
</script>

数据提交与验证

提交选中的数据时，需检查是否已选择条目：

methods: {
  submitData() {
    if (this.selectedItems.length === 0) {
      alert('请至少选择一项');
      return;
    }
    console.log('已选数据:', this.selectedItems);
  }
}

性能优化建议

对于大数据量表格，建议启用分页或虚拟滚动：

vue表格实现多选

分页：通过current-page和page-size控制显示数据量
虚拟滚动：使用vue-virtual-scroller等库减少DOM节点

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next">
</el-pagination>