如何在vue-tables-2中添加复选框列实现批量选择功能？

嘿，我之前正好用vue-tables-2做过类似的多选功能，给你梳理下具体实现步骤，应该能帮到你：

1. 先给表格数据添加选中状态标识 #

首先，在你获取到用户列表数据后，给每一条数据添加一个_selected属性，用来标记该行是否被选中：

// 假设你的用户列表数据是userList
this.userList = res.data.map(row => ({
  ...row,
  _selected: false // 初始化未选中状态
}))

2. 定义表格列并添加复选框列 #

在vue-tables-2的列配置里，新增一个专门放复选框的列，同时自定义表头和单元格模板：

<template>
  <v-client-table
    :data="userList"
    :columns="columns"
    :options="tableOptions"
  >
    <!-- 表头全选复选框 -->
    <template slot="header-checkbox" slot-scope="props">
      <input
        type="checkbox"
        v-model="selectAll"
        @change="handleSelectAll"
      >
    </template>

    <!-- 每行的复选框 -->
    <template slot="checkbox" slot-scope="props">
      <input
        type="checkbox"
        v-model="props.row._selected"
        @change="handleRowSelect"
      >
    </template>
  </v-client-table>
</template>

对应的列配置和核心逻辑：

export default {
  data() {
    return {
      userList: [],
      selectAll: false,
      columns: [
        { 
          label: '', 
          field: 'checkbox', 
          sortable: false, // 禁止该列排序
          headerTemplate: 'header-checkbox' // 指定表头模板
        },
        // 你的其他业务列，比如用户名、邮箱等
        { label: '用户名', field: 'username' },
        { label: '邮箱', field: 'email' }
      ],
      tableOptions: {
        // 你的其他表格配置，比如分页、搜索等
      }
    }
  },
  methods: {
    // 处理单行选中状态变化
    handleRowSelect() {
      // 检查所有行是否都被选中，同步更新全选按钮状态
      this.selectAll = this.userList.every(row => row._selected)
    },
    // 处理全选/取消全选
    handleSelectAll() {
      this.userList.forEach(row => {
        row._selected = this.selectAll
      })
    },
    // 获取所有选中的用户数据
    getSelectedUsers() {
      return this.userList.filter(row => row._selected)
    }
  }
}

3. 额外提示 #

• 如果你的表格有分页功能，默认全选只会作用于当前页的数据（这和Gmail的逻辑一致）；如果需要跨页全选，你得自己维护一个全局的选中ID集合，配合分页数据做关联判断。
• 可以给复选框加些简单样式，比如给表头的复选框添加上margin，避免和其他内容挤在一起，提升视觉体验。

这样就能实现你想要的类似Gmail的全选/多行选择功能了，亲测可用~

内容的提问来源于stack exchange，提问作者UnmeshD