vue3 antd-vue 超简单方式实现a-table跨页勾选以及解决全选异常的问题

'# vue3 antd-vue 超简单方式实现a-table跨页勾选以及解决全选异常的问题

一、背景与问题

在实际开发中，我们常常需要在分页数据展示组件中实现跨页勾选功能。以 antd-vue 的 a-table 为例，其默认行为在分页切换时会重置勾选状态，这会破坏用户体验。同时，全选功能在分页场景下也存在异常：用户点击全选时，可能仅选中当前页数据，而未处理其他页的数据。

典型场景包括：

商品管理页面的批量操作
用户权限分配的多页数据处理
工单系统中的跨页数据选择

核心问题在于：

分页切换时如何保持选中状态
全选操作时如何覆盖所有页数据
多页数据合并后的状态一致性

二、基本原理

antd-vue 的 a-table 通过 rowSelection 实现行选择功能，其核心机制是维护一个选中行的集合。在分页场景下，由于数据是分批加载的，需要额外维护全局选中状态。

关键原理包括：

使用 ref 或 reactive 保存全局选中状态
在分页变化时同步更新选中状态
全选时遍历所有已加载数据更新选中状态
使用 v-model 实现双向绑定

三、环境准备

确保项目中已安装以下依赖：

npm install antd-vue
npm install @types/antd-vue

创建一个简单的 Vue3 项目结构：

project-root/
├── App.vue
├── main.js
└── components/
    └── TableWithPagination.vue

四、核心实现

1. 基础组件实现

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :rowSelection="rowSelection"
    :pagination="pagination"
    @change="handleTableChange"
  />
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { Table } from 'antd-vue'

export default {
  components: { Table },
  setup() {
    const state = reactive({
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      selectedRowKeys: [],
      selectedRows: [],
      loading: false
    })

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      }
    ]

    const rowSelection = {
      selectedRowKeys: state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        state.selectedRowKeys = selectedRowKeys
        state.selectedRows = selectedRows
      },
      onSelect: (record, selected) => {
        const index = state.selectedRows.findIndex(r => r.id === record.id)
        if (selected) {
          state.selectedRows.splice(index, 0, record)
        } else {
          state.selectedRows.splice(index, 1)
        }
        state.selectedRowKeys = state.selectedRows.map(r => r.id)
      }
    }

    const handleTableChange = (pagination, filters, sorter) => {
      state.pagination = {
        ...state.pagination,
        ...pagination
      }
    }

    return {
      ...toRefs(state),
      columns,
      rowSelection,
      handleTableChange
    }
  }
}
</script>

2. 全选逻辑实现

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :row-selection="rowSelection"
    :pagination="pagination"
    @change="handleTableChange"
  />
</template>

<script>
import { ref, reactive, toRefs, computed } from 'vue'
import { Table } from 'antd-vue'

export default {
  components: { Table },
  setup() {
    const state = reactive({
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      selectedRowKeys: [],
      selectedRows: [],
      allSelected: false,
      loading: false
    })

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      }
    ]

    const rowSelection = computed(() => ({
      selectedRowKeys: state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        state.selectedRowKeys = selectedRowKeys
        state.selectedRows = selectedRows
        state.allSelected = selectedRows.length === state.dataSource.length
      },
      onSelect: (record, selected) => {
        const index = state.selectedRows.findIndex(r => r.id === record.id)
        if (selected) {
          state.selectedRows.splice(index, 0, record)
        } else {
          state.selectedRows.splice(index, 1)
        }
        state.selectedRowKeys = state.selectedRows.map(r => r.id)
        state.allSelected = state.selectedRows.length === state.dataSource.length
      }
    }))

    const handleTableChange = (pagination, filters, sorter) => {
      state.pagination = {
        ...state.pagination,
        ...pagination
      }
    }

    return {
      ...toRefs(state),
      columns,
      rowSelection,
      handleTableChange
    }
  }
}
</script>

3. 跨页勾选实现

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :row-selection="rowSelection"
    :pagination="pagination"
    @change="handleTableChange"
  />
</template>

<script>
import { ref, reactive, toRefs, computed } from 'vue'
import { Table } from 'antd-vue'

export default {
  components: { Table },
  setup() {
    const state = reactive({
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      selectedRowKeys: [],
      selectedRows: [],
      allSelected: false,
      loading: false
    })

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      }
    ]

    const rowSelection = computed(() => ({
      selectedRowKeys: state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        state.selectedRowKeys = selectedRowKeys
        state.selectedRows = selectedRows
        state.allSelected = selectedRows.length === state.dataSource.length
      },
      onSelect: (record, selected) => {
        const index = state.selectedRows.findIndex(r => r.id === record.id)
        if (selected) {
          state.selectedRows.splice(index, 0, record)
        } else {
          state.selectedRows.splice(index, 1)
        }
        state.selectedRowKeys = state.selectedRows.map(r => r.id)
        state.allSelected = state.selectedRows.length === state.dataSource.length
      }
    }))

    const handleTableChange = (pagination, filters, sorter) => {
      state.pagination = {
        ...state.pagination,
        ...pagination
      }
    }

    return {
      ...toRefs(state),
      columns,
      rowSelection,
      handleTableChange
    }
  }
}
</script>

五、完整案例

1. 模拟数据源

function generateMockData(page = 1, pageSize = 10) {
  const data = [];
  for (let i = 0; i < pageSize; i++) {
    data.push({
      id: (page - 1) * pageSize + i + 1,
      name: `Item ${ (page - 1) * pageSize + i + 1 }`
    });
  }
  return data;
}

2. 完整组件实现

<template>
  <div style="padding: 20px;">
    <a-button type="primary" @click="toggleAllSelect">全选/取消全选</a-button>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-selection="rowSelection"
      :pagination="pagination"
      @change="handleTableChange"
    />
    <div style="margin-top: 20px;">
      <p>当前选中项：{{ selectedRows.length }} 项</p>
      <p>全选状态：{{ allSelected ? '已全选' : '未全选' }}</p>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, watch } from 'vue'
import { Table, Button } from 'antd-vue'

export default {
  components: { Table, Button },
  setup() {
    const state = reactive({
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      selectedRowKeys: [],
      selectedRows: [],
      allSelected: false,
      loading: false
    })

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      }
    ]

    const rowSelection = computed(() => ({
      selectedRowKeys: state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        state.selectedRowKeys = selectedRowKeys
        state.selectedRows = selectedRows
        state.allSelected = selectedRows.length === state.dataSource.length
      },
      onSelect: (record, selected) => {
        const index = state.selectedRows.findIndex(r => r.id === record.id)
        if (selected) {
          state.selectedRows.splice(index, 0, record)
        } else {
          state.selectedRows.splice(index, 1)
        }
        state.selectedRowKeys = state.selectedRows.map(r => r.id)
        state.allSelected = state.selectedRows.length === state.dataSource.length
      }
    }))

    const handleTableChange = (pagination, filters, sorter) => {
      state.pagination = {
        ...state.pagination,
        ...pagination
      }
    }

    const toggleAllSelect = () => {
      if (state.allSelected) {
        state.selectedRowKeys = []
        state.selectedRows = []
      } else {
        state.selectedRowKeys = state.dataSource.map(item => item.id)
        state.selectedRows = [...state.dataSource]
      }
      state.allSelected = !state.allSelected
    }

    // 模拟分页数据加载
    const fetchData = async (page = 1) => {
      state.loading = true
      const data = generateMockData(page, state.pagination.pageSize)
      state.dataSource = data
      state.pagination.total = 100 // 模拟总数据量
      state.loading = false
    }

    // 监听分页变化
    watch(
      () => state.pagination.current,
      (newPage) => {
        fetchData(newPage)
      }
    )

    return {
      ...toRefs(state),
      columns,
      rowSelection,
      handleTableChange,
      toggleAllSelect
    }
  }
}
</script>

六、源码解析

1. 状态管理机制

使用 reactive 创建响应式对象，包含：
- selectedRowKeys: 当前选中行的 ID 列表
- selectedRows: 当前选中行的完整数据
- allSelected: 全选状态标志
通过 computed 创建 rowSelection 属性，确保每次状态变化时自动更新

2. 全选逻辑实现

toggleAllSelect 方法：
- 当 allSelected 为 true 时，清空选中状态
- 当 allSelected 为 false 时，将所有行加入选中状态
使用 map 操作将 dataSource 转换为 ID 列表

3. 跨页勾选处理

在 onSelect 回调中：
- 通过 findIndex 找到对应行在 selectedRows 中的位置
- 根据 selected 状态进行增删操作
- 更新 selectedRowKeys 为选中行的 ID 列表
通过 watch 监听分页变化，确保分页切换时选中状态保持

七、进阶使用

1. 与后端接口集成

// 模拟 API 接口
async function fetchPageData(page, pageSize) {
  // 实际开发中应替换为真实 API 调用
  const response = await fetch(`https://api.example.com/data?page=${page}&size=${pageSize}`)
  const data = await response.json()
  return {
    dataSource: data.items,
    pagination: {
      current: data.page,
      pageSize: data.size,
      total: data.total
    }
  }
}

2. 支持多选和单选切换

// 在组件中增加模式切换
const mode = ref('multiple')

const rowSelection = computed(() => ({
  selectedRowKeys: state.selectedRowKeys,
  onChange: (selectedRowKeys, selectedRows) => {
    if (mode.value === 'multiple') {
      state.selectedRowKeys = selectedRowKeys
      state.selectedRows = selectedRows
    } else {
      // 单选逻辑
      state.selectedRowKeys = selectedRowKeys.length ? selectedRowKeys : []
      state.selectedRows = selectedRowKeys.length ? [selectedRows[0]] : []
    }
  }
}))

3. 支持批量操作

// 在组件中添加批量操作按钮
const batchActions = {
  delete: async () => {
    if (state.selectedRows.length > 0) {
      // 实际开发中应调用删除接口
      console.log('Deleting:', state.selectedRows)
    }
  },
  enable: async () => {
    if (state.selectedRows.length > 0) {
      // 实际开发中应调用启用接口
      console.log('Enabling:', state.selectedRows)
    }
  }
}

八、性能与工程实践

1. 性能优化策略

防抖处理：在分页切换时使用防抖函数避免频繁触发数据加载
虚拟滚动：使用 vue-virtual-scroller 优化大量数据展示
缓存机制：使用 localStorage 缓存用户选中状态（需注意数据安全）
懒加载：仅在需要时加载分页数据，避免一次性加载全部数据

2. 异常处理机制

数据校验：确保从接口获取的数据格式正确
状态同步：在组件卸载时清理状态
错误边界：使用 Vue 的 error handling 功能捕获异常

3. 安全考虑

数据加密：在需要时对敏感数据进行加密处理
权限控制：确保只有授权用户才能进行选中操作
输入校验：对用户输入进行严格校验防止 XSS 攻击

九、常见问题与踩坑

1. 选中状态丢失问题

现象：分页切换后选中状态丢失

原因：未正确处理分页变化时的状态更新

解决办法：

watch(
  () => state.pagination.current,
  (newPage) => {
    fetchData(newPage)
    // 保持选中状态
    if (state.selectedRowKeys.length > 0) {
      state.selectedRowKeys = state.selectedRowKeys
    }
  }
)

2. 全选异常

现象：点击全选时仅选中当前页数据

原因：未正确遍历所有已加载数据

解决办法：

const toggleAllSelect = () => {
  if (state.allSelected) {
    state.selectedRowKeys = []
    state.selectedRows = []
  } else {
    state.selectedRowKeys = state.dataSource.map(item => item.id)
    state.selectedRows = [...state.dataSource]
  }
  state.allSelected = !state.allSelected
}

3. 状态同步异常

现象：手动修改 selectedRowKeys 时未同步 selectedRows

解决办法：在 onSelect 回调中同步处理

onSelect: (record, selected) => {
  const index = state.selectedRows.findIndex(r => r.id === record.id)
  if (selected) {
    state.selectedRows.splice(index, 0, record)
  } else {
    state.selectedRows.splice(index, 1)
  }
  state.selectedRowKeys = state.selectedRows.map(r => r.id)
}

十、最佳实践

1. 使用场景

需要跨页选择的批量操作场景
数据量适中（建议不超过 1000 条/页）
需要精确控制选中状态的场景

2. 避免使用场景

数据量极大（建议超过 1000 条/页时使用虚拟滚动）
需要复杂筛选条件的场景
需要实时数据更新的场景

3. 推荐方案

使用 reactive 管理状态
结合 watch 监听分页变化
使用 computed 管理行选择逻辑
在需要时结合虚拟滚动优化性能

十一、总结

通过本文的深入分析，我们实现了 antd-vue 的 a-table 跨页勾选功能，并解决了全选异常问题。核心在于：

使用响应式状态管理保持选中状态
在分页变化时同步选中状态
通过计算属性实现全选逻辑
处理多页数据合并的复杂场景

在实际开发中，需要根据具体业务场景选择合适的实现方案。对于需要精确控制选中状态的场景，推荐使用本方案；对于数据量极大或需要复杂筛选的场景，应考虑使用虚拟滚动等优化手段。

需要注意的是，保持代码的可维护性和可扩展性，合理使用 Vue 的响应式系统，避免不必要的状态更新。在实际项目中，建议结合单元测试和集成测试确保功能的正确性。

vue3 antd-vue 超简单方式实现a-table跨页勾选以及解决全选异常的问题

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础组件实现

2. 全选逻辑实现

3. 跨页勾选实现

五、完整案例

1. 模拟数据源

2. 完整组件实现

六、源码解析

1. 状态管理机制

2. 全选逻辑实现

3. 跨页勾选处理

七、进阶使用

1. 与后端接口集成

2. 支持多选和单选切换

3. 支持批量操作

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

3. 安全考虑

九、常见问题与踩坑

1. 选中状态丢失问题

2. 全选异常

3. 状态同步异常

十、最佳实践

1. 使用场景

2. 避免使用场景

3. 推荐方案

十一、总结

评论已关闭

推荐阅读