Ele Scroll Table

组件介绍

Ele Scroll Table 是基于 Element Plus 的可复用表格组件，内置分页、列配置、多级表头、横向拖拽提示与双击复制等能力，适合快速搭建后台类列表页面。

特性

• 兼容 Element Plus 表格配置
• 支持自定义列与多级表头
• 支持横向滚动提示与中键拖拽
• 支持双击单元格复制内容
• 支持分页与自定义分页布局
• 默认中文提示文案

安装

npm i ele-scroll-table

列设置弹窗功能依赖：

npm i e-plus-dialog-vue3

快速开始

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import EleScrollTable from 'ele-scroll-table'
import 'ele-scroll-table/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(EleScrollTable)

<BaseTable
  :dataList="dataList"
  :tableItem="tableItem"
  :paginationInfo="paginationInfo"
  :listCount="listCount"
  showIndex
  @update:paginationInfo="onPaginationChange"
/>

Props

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | dataList | Array | [] | 表格数据 | | tableItem | Array | [] | 列配置 | | border | Boolean | true | 是否显示边框 | | showChoose | Boolean | false | 是否显示多选列 | | showIndex | Boolean | false | 是否显示序号列 | | showExpand | Boolean | false | 是否显示展开列 | | pagination | Boolean | true | 是否显示分页 | | listCount | Number | 0 | 总条数 | | paginationInfo | Object | { pageNum: 1, pageSize: 50 } | 分页参数 | | paginationLayout | String | total, sizes, prev, pager, next, jumper | 分页布局 | | elTableConfig | Object | {} | 透传给 el-table 的配置 | | tableListener | Object | {} | 透传给 el-table 的事件监听 | | align | String | center | 列默认对齐方式 | | hideItems | Array / Object | {} | 隐藏列配置 | | maxHeight | Number / String | - | 最大高度 | | selectionConfig | Object | {} | 透传给 selection 列配置 | | autoResize | Boolean | true | 自适应高度 | | dragTipScope | String | global | 提示存储作用域 | | dragTipStorageKey | String | - | 自定义提示存储 key | | headerButtons | Array | ['columnDisplay', 'comSearch'] | 右侧默认按钮 | | columnDisplayThreshold | Number | 12 | 超过阈值使用弹窗列设置 | | enableDblclickCopy | Boolean | true | 是否启用双击复制 | | copyFeedback | Boolean | true | 是否显示复制提示 | | copyLocale | Object | { success: '已复制', failed: '复制失败', empty: '无可复制内容' } | 复制提示文案 | | persistenceColumn | Boolean | true | 是否开启列显示状态本地存储 | | persistenceKey | String | - | 列显示状态存储 Key |

事件

| 事件名 | 说明 | | --- | --- | | update:paginationInfo | 分页参数变化 | | sortChange | 排序变化 | | toggleSearch | 点击搜索按钮 |

Slots

| 名称 | 说明 | | --- | --- | | handleLeft / handleRight | 表头左/右操作区 | | expand | 展开行内容 | | footer | 自定义分页 | | 任意 slotName | 列内容插槽 |

tableItem 列配置

tableItem 支持 Element Plus el-table-column 的配置，同时扩展了以下能力：

• slotName: 使用指定 slot 渲染列内容
• slotNames: 批量扩展 slot（会拼接为 prop + SlotName）
• merges: 多级表头配置，子列继续使用 TableColumn 渲染

示例：

const tableItem = [
  { prop: 'name', label: '姓名', minWidth: 120 },
  { prop: 'status', label: '状态', minWidth: 120, slotNames: ['tag'] },
  {
    label: '多级表头',
    merges: [
      { prop: 'city', label: '城市', minWidth: 120 },
      { prop: 'role', label: '角色', minWidth: 120 },
    ],
  },
]

<template #statusTag="{ backData }">
  <el-tag :type="backData.status === '正常' ? 'success' : 'danger'">
    {{ backData.status }}
  </el-tag>
</template>

横向拖拽提示

默认全局只提示一次，也可按表或自定义 key 控制提示：

<BaseTable dragTipScope="instance" />
<BaseTable dragTipStorageKey="custom_drag_tip_key" />

双击复制

双击单元格复制内容，默认开启，默认中文提示：

<BaseTable :enableDblclickCopy="false" />
<BaseTable :copyLocale="{ success: '复制成功', failed: '复制失败', empty: '无内容' }" />

列显示状态持久化

默认开启 persistenceColumn，但必须设置 persistenceKey 才会生效。 会自动保存用户设置的显示/隐藏列状态。建议为每个表格设置唯一的 persistenceKey。

<BaseTable persistenceKey="user_list_table_columns" />

完整案例

<BaseTable
  :dataList="dataList"
  :tableItem="tableItem"
  :paginationInfo="paginationInfo"
  :listCount="listCount"
  showIndex
  showChoose
  @update:paginationInfo="onPaginationChange"
>
  <template #statusTag="{ backData }">
    <el-tag :type="backData.status === '正常' ? 'success' : 'danger'">
      {{ backData.status }}
    </el-tag>
  </template>
</BaseTable>