vue表格实现多选

实现多选表格的基础方法

使用el-table组件配合type="selection"的列即可实现多选功能。需设置row-key确保行唯一标识，通过v-model绑定选中数据。

<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    row-key="id"
  >
    <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: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ],
      selectedRows: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val
    }
  }
}
</script>

跨页多选实现

需要配合分页组件保存已选项。通过reserve-selection属性保持选项跨页记忆，使用toggleRowSelection方法恢复选中状态。

<el-table
  :data="pagedData"
  @select="handleSelect"
  @select-all="handleSelectAll"
>
  <el-table-column 
    type="selection" 
    reserve-selection
    width="55">
  </el-table-column>
</el-table>

<script>
export default {
  methods: {
    handleSelect(selection, row) {
      this.$refs.multipleTable.toggleRowSelection(row, true)
    },
    handleSelectAll(selection) {
      selection.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row, true)
      })
    }
  }
}
</script>

自定义选择逻辑

通过selectable属性控制行是否可选，实现条件选择。

<el-table-column
  type="selection"
  :selectable="checkSelectable"
>
</el-table-column>

<script>
export default {
  methods: {
    checkSelectable(row, index) {
      return row.status === 'active' // 仅允许active状态的行被选中
    }
  }
}
</script>

全选与反选功能

通过表格实例的方法实现程序化选择控制。

methods: {
  toggleAllSelection() {
    this.$refs.multipleTable.toggleAllSelection()
  },
  clearSelection() {
    this.$refs.multipleTable.clearSelection()
  }
}

性能优化建议

对于大数据量场景，建议采用懒加载或虚拟滚动方案。Element UI的表格在渲染超过1000条数据时可能出现性能问题，可考虑以下方案：

• 使用分页加载
• 实现虚拟滚动表格组件
• 采用vxe-table等高性能表格库替代

// 虚拟滚动示例（需配合第三方库）
import { VirtualTable } from 'vue-virtual-scroll'
components: {
  VirtualTable
}