A Vue 3 component for resizable and draggable table columns with ViewUI
npm install vue-resizable-table一个功能强大的 Vue 3 可调整列宽表格组件，支持列拖拽排序、字段选择、自动保存配置等功能。
- 🎯 列宽调整: 支持拖拽调整列宽，自动保存配置
- 🔄 列拖拽排序: 支持拖拽交换列位置，实时预览效果
- 👁️ 字段选择: 支持动态显示/隐藏列，灵活控制表格展示
- 💾 配置持久化: 自动保存列宽、顺序、可见性配置到本地存储
- 📱 响应式设计: 支持窗口大小变化时自动调整列宽
- 🎨 美观界面: 现代化 UI 设计，丰富的视觉反馈
- ⚡ 高性能: 优化的拖拽算法，流畅的交互体验
- 🔧 高度可配置: 丰富的配置选项，满足各种使用场景
``bash`
npm install resizable-table-vue
`vue
:columns="columns"
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:loading="loading"
title="用户列表"
@on-page-change="handlePageChange"
@on-page-size-change="handlePageSizeChange"
@on-column-resize="handleColumnResize"
@on-column-reorder="handleColumnReorder"
@on-selection-change="handleSelectionChange"
/>
`
`javascript
import { createApp } from 'vue'
import ResizableTable from 'resizable-table-vue'
const app = createApp(App)
app.use(ResizableTable)
`
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| data | Array | [] | 表格数据 |
| columns | Array | [] | 表格列配置 |
| loading | Boolean | false | 加载状态 |
| title | String | '' | 表格标题 |
| total | Number | 0 | 数据总数 |
| currentPage | Number | 1 | 当前页码 |
| pageSize | Number | 10 | 每页条数 |
| border | Boolean | true | 是否显示边框 |
| stripe | Boolean | true | 是否显示斑马纹 |
| height | Number/String | null | 表格高度 |
| maxHeight | Number/String | null | 表格最大高度 |
| showHeader | Boolean | true | 是否显示表头 |
| size | String | 'default' | 表格尺寸 (large/default/small) |
| noDataText | String | '暂无数据' | 无数据时显示的文本 |
| noFilteredDataText | String | '暂无筛选结果' | 无筛选结果时显示的文本 |
| showToolbar | Boolean | true | 是否显示工具栏 |
| showPagination | Boolean | true | 是否显示分页器 |
| pageSizeOpts | Array | [10, 20, 50, 100] | 每页条数选择器的选项 |
| showTotal | Boolean | true | 是否显示总数 |
| showElevator | Boolean | true | 是否显示电梯（快速跳转） |
| showSizer | Boolean | true | 是否显示分页大小选择器 |
| showQuickJumper | Boolean | false | 是否显示快速跳转 |
| paginationSize | String | 'default' | 分页器尺寸 |
| simple | Boolean | false | 是否使用简洁分页器 |
| placement | String | 'bottom' | 分页器位置 |
| storageKey | String | 'resizable-table-columns' | 本地存储键名 |
| minWidth | Number | 300 | 最小列宽 |
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| key | String | - | 列标识 |
| title | String | - | 列标题 |
| width | Number | - | 列宽度 |
| minWidth | Number | 120 | 最小宽度 |
| resizable | Boolean | true | 是否可调整大小 |
| draggable | Boolean | true | 是否可拖拽排序 |
| sortable | Boolean | false | 是否可排序 |
| filterable | Boolean | false | 是否可过滤 |
| align | String | 'left' | 对齐方式 |
| fixed | String | - | 固定列 (left/right) |
| render | Function | - | 自定义渲染函数 |
| slot | String | - | 插槽名称 |
| 事件名 | 参数 | 说明 |
|--------|------|------|
| on-select | selection, row | 在多选模式下，选中某一项时触发 |
| on-select-cancel | selection, row | 在多选模式下，取消选中某一项时触发 |
| on-select-all | selection | 在多选模式下，点击全选时触发 |
| on-select-all-cancel | selection | 在多选模式下，点击取消全选时触发 |
| on-selection-change | selection | 在多选模式下，只要选中项发生变化时就会触发 |
| on-sort-change | column | 排序变化时触发 |
| on-filter-change | filters | 过滤变化时触发 |
| on-row-click | row, index | 点击行时触发 |
| on-row-dblclick | row, index | 双击行时触发 |
| on-expand | row, status | 展开或收起某一行时触发 |
| on-expand-change | expandedRows | 展开的行发生变化时触发 |
| on-current-change | currentRow, oldCurrentRow | 当前行发生变化时触发 |
| on-page-change | page | 页码变化时触发 |
| on-page-size-change | pageSize | 每页条数变化时触发 |
| on-column-resize | { column, width, deltaX } | 列宽调整时触发 |
| on-column-reorder | { fromIndex, toIndex, newOrder, action } | 列排序变化时触发 |
组件支持拖拽调整列宽，调整后的宽度会自动保存到本地存储。
`vue`
:min-width="100"
storage-key="my-table-config"
@on-column-resize="handleColumnResize"
/>
特性说明：
- 鼠标悬停在列边界时显示调整光标
- 支持设置最小列宽限制
- 自动保存调整后的列宽到本地存储
- 支持重置列宽功能
支持拖拽交换列位置，提供实时预览效果。
`vue`
@on-column-reorder="handleColumnReorder"
/>
特性说明：
- 拖拽时显示视觉反馈和指示器
- 实时预览拖拽效果
- 支持禁用特定列的拖拽功能
- 自动保存列顺序到本地存储
用户可以动态选择显示哪些列。
`vue`
:show-toolbar="true"
/>
特性说明：
- 工具栏提供字段选择按钮
- 支持全选/取消全选功能
- 显示已选择字段数量统计
- 自动保存字段可见性设置
组件会自动将用户的配置保存到本地存储，包括：
- 列宽设置：每列的宽度调整
- 列顺序：拖拽后的列排序
- 字段可见性：显示/隐藏的列设置
`vue`
:columns="columns"
/>
配置管理：
- 使用 localStorage 进行持久化存储
- 支持自定义存储键名
- 提供手动保存和自动保存功能
- 支持重置所有配置
组件提供了丰富的工具栏功能：
`vue`
title="数据列表"
:total="100"
/>
工具栏包含：
- 表格标题：显示表格名称
- 数据统计：显示总记录数
- 重置列宽：一键重置所有列宽
- 选择字段：打开字段选择弹窗
- 保存设置：手动保存当前配置
组件支持响应式布局，在不同屏幕尺寸下自动调整：
`css`
/ 移动端适配 /
@media (max-width: 768px) {
.table-toolbar {
flex-direction: column;
}
.pagination-wrapper {
text-align: center;
}
}
支持自定义列内容渲染。
`javascript`
const columns = [
{
key: 'status',
title: '状态',
render: (h, { row }) => {
const color = row.status === 'active' ? 'success' : 'error'
return h('Tag', { props: { color } }, row.status)
}
}
]
支持使用插槽自定义列内容。
`vue`
{{ row.status }}
组件完整支持表格的多选功能：
`vue`
@on-selection-change="handleSelectionChange"
@on-select-all="handleSelectAll"
/>
多选特性：
- 支持单行选择和全选
- 提供选择状态变化事件
- 支持取消选择操作
- 选择状态实时反馈
支持表格行的展开和收起：
`vue`
@on-expand="handleExpand"
@on-expand-change="handleExpandChange"
/>
| 方法名 | 说明 | 参数 |
|--------|------|------|
| resetColumnWidths | 重置所有列宽到默认值 | - |
| saveSettings | 手动保存当前配置到本地存储 | - |
| showFieldSelector | 显示字段选择弹窗 | - |
| hideFieldSelector | 隐藏字段选择弹窗 | - |
| selectAllFields | 全选所有字段 | - |
| unselectAllFields | 取消全选所有字段 | - |
| applyFieldSelection | 应用字段选择 | - |
| cancelFieldSelection | 取消字段选择 | - |
| 插槽名 | 说明 | 参数 |
|--------|------|------|
| default | 表格列内容插槽 | { row, column, index } |
| [column.key] | 特定列的内容插槽 | { row, column, index } |
| toolbar-left | 工具栏左侧自定义内容 | - |
| toolbar-right | 工具栏右侧自定义内容 | - |
| empty | 空数据时的自定义内容 | - |
组件使用 localStorage 来持久化用户配置，存储的数据结构如下：
`javascript`
{
columnWidths: {
[columnKey]: width // 列宽设置
},
columnOrder: [columnKey1, columnKey2, ...], // 列顺序
visibleColumns: {
[columnKey]: boolean // 列可见性
}
}
存储键名规则：
- 默认键名：resizable-table-config
- 自定义键名：通过 prop 设置${storageKey}-${configType}
- 完整键名：
配置类型：
- widths：列宽配置order
- ：列顺序配置 visibility
- ：列可见性配置
组件提供了丰富的 CSS 类名，可以轻松定制样式。
`css
/ 自定义表格样式 /
.resizable-table-container {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/ 自定义工具栏样式 /
.table-toolbar {
background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
}
/ 自定义拖拽样式 /
.drag-indicator {
background: linear-gradient(180deg, #28a745 0%, #20c997 100%);
}
``
- Chrome >= 60
- Firefox >= 60
- Safari >= 12
- Edge >= 79
- Vue 3.0+
- View UI Plus (iView)
MIT License
- 初始版本发布
- 支持列宽调整
- 支持列拖拽排序
- 支持字段选择
- 支持配置持久化
拖拽调整列宽
拖拽交换列位置