Skip to content

hl-cross-table-selector 跨页多选表格

跨页多选表格组件,基于 Element Plus 的 el-table 封装。主要解决分页场景下的数据选择状态保持问题,支持列拖拽排序、显示/隐藏等配置功能。

功能特性

  • ✨ 跨页数据选择状态保持
  • 🔄 列拖拽排序
  • 👁️ 列显示/隐藏配置
  • 🔍 支持列搜索
  • ⚡️ 列排序
  • 📱 响应式布局

基础用法

使用场景

1. 批量操作

适用于需要跨页选择数据进行批量操作的场景,如:

  • 批量审核
  • 批量删除
  • 批量状态更新
  • 批量导出

2. 列表配置

支持个性化列表显示:

  • 自定义列显示/隐藏
  • 拖拽调整列顺序

API

Props

参数说明类型默认值
v-model选中的行数据数组array[]
columns表格列配置,继承 el-table-column 的属性array[]
data表格数据array[]
showSelection是否显示选择列booleanfalse
loading加载状态booleanfalse
settingBtnText列设置按钮文本string'列表配置'

Column 配置项

参数说明类型默认值
prop对应列内容的字段名string-
label显示的标题string-
slot自定义列插槽名称string-
sortable是否可排序booleanfalse
searchable是否可搜索booleanfalse
isChecked是否显示该列booleantrue
width列宽度string/number-
minWidth最小列宽度string/number-
fixed列是否固定string/boolean-
columnProps透传给 el-table-column 的属性object-

Events

事件名说明回调参数
update:modelValue选中数据变化时触发(selection: array)
select手动勾选数据行时触发(selection: array, row: object)
select-all手动勾选全选时触发(selection: array)
pagination-change分页变化时触发(page: number)
sort-change排序变化时触发({ prop: string, order: string })
search搜索条件变化时触发(params: object)
columns-change列配置变化时触发(columns: array)

Slots

插槽名说明作用域参数
headSearch表格顶部搜索区域-
[column.slot]自定义列内容{ row, column, $index }

注意事项

  1. 列配置持久化:列的显示/隐藏、排序等配置会触发 columns-change 事件,可以在此事件中进行配置的持久化处理。

  2. 跨页选择:组件会自动维护跨页选择的状态,切换分页时不会丢失已选择的数据。建议在以下场景使用:

    • 大数据量分页展示
    • 需要记住用户选择的数据
    • 批量操作频繁的场景
  3. 自定义列:通过 slot 配置可以自定义列的渲染内容,slot 名称需要与 column 配置中的 slot 属性对应。常见用法:

    • 状态标签展示
    • 图片/文件预览
    • 操作按钮组
    • 自定义格式化
  4. 搜索功能:可以通过 headSearch 插槽自定义搜索区域,搜索条件变化时会触发 search 事件。支持:

    • 单字段搜索
    • 多条件组合搜索
    • 自定义搜索组件