VTable 多功能表格组件
基于 ant-design-vue 和 Vue 3 的功能强大的表格组件，支持列自定义、排序、本地化存储、行选择等特性。
当前组件继承了Ant-Design-Vue Table组件的所有列属性和方法，并在此基础上进行扩展。
Github：https://github.com/friend-nicen/table
1.特性
- 🚀 基于 ant-design-vue 3.x 和 Vue 3
- 📦 开箱即用的高性能表格组件
- 🎨 支持列自定义配置与本地存储
- 📊 灵活的排序和过滤功能
2.快速开始
<template> <v-table :init="'api/data'"/> </template> <script setup> import {initTable} from 'v-table'; const columns = [ { title: 'ID', width: 60 }, { title: '名称', dataIndex: 'name', width: 120, sortable: 'number' } ]; const table = initTable({ unique: 'my-table', column: columns, localize: true }); </script>
API
1.VTable Props
v-table组件支持的属性，如下：
| 参数 | 说明 | 类型 | 默认值 |
| init | 数据初始化接口地址 | string | - |
| dataSource | 静态数据源 | Record<string, any>[] | - |
| pagination | 分页配置 | TablePagination | {} |
| sticky | 表头吸顶配置 | { offsetHeader: number } | { offsetHeader: 60 } |
| rowsKey | 行唯一标识字段 | string | 'id' |
| scroll | 表格滚动配置 | { x: string | number } | { x: 'max-content' } |
| size | 表格大小 | 'small' | 'middle' | 'large' | 'large' |
| rowSelection | 行选择配置 | boolean | Record<string, any> | false |
2.TableColumn
表格列支持的属性，如下：
| 参数 | 说明 | 类型 | 默认值 |
| title | 列标题 | string | - |
| dataIndex | 列数据字段名 | string | - |
| width | 列宽度 | number | 100 |
| fixed | 列固定位置 | boolean | 'left' | 'right' | false |
| resizable | 是否可调整列宽 | boolean | true |
| display | 是否显示列 | boolean | true |
| editable | 是否可编辑 | boolean | false |
| empty | 是否允许为空 | boolean | false |
| sortable | 排序类型 | 'number' | 'dayjs' | - |
| timestamp | 时间戳格式 | string | - |
3.TableConfig
initTable调用时，支持传递的参数对象：
| 参数 | 说明 | 类型 | 默认值 |
| unique | 唯一标识字段 | string | - |
| column | 列配置 | TableColumn[] | - |
| condition | 查询条件 | Record<string, any> | - |
| callback | 数据加载成功回调 | (data: any, pagination: TablePagination) => void | - |
| error | 数据加载失败回调 | (error: any, pagination: TablePagination) => void | - |
| filter | 数据过滤器 | (data: any[]) => any[] | - |
| immediate | 是否立即加载数据 | boolean | true |
| watch | 是否监听条件变化 | boolean | true |
| localize | 是否本地化保存列配置 | boolean | false |
| defaultExpandAllRows | 是否默认展开所有行 | boolean | true |
4.TableInstance
表格对象的相关属性和方法，表格初始化之后，会调用 provide(table) ，任意子组件可通过inject获取表格对象：
| 参数 | 说明 | 类型 |
| loadData | 加载数据方法 | (paginate?: TablePagination, filters?: Record<string, any>, sorter?: Record<string, any>) => Promise |
| selectRows | 选中行数据 | { keys: any[], rows: any[] } |
| condition | 查询条件 | { data: Record<string, any> } |
| editable | 单元格是否可编辑 | boolean[][] |
| dataSource | 当前表格的数据对象 | boolean[][] |
示例
1.基础表格
<template> <v-table :init="'api/data'"/> </template> <script setup> import {initTable} from 'v-table'; const columns = [ { title: 'ID', width: 60 }, { title: '名称', dataIndex: 'name', width: 120 } ]; const table = initTable({ unique: 'basic-table', column: columns }); </script>
2.可选择表格
<template> <v-table :init="'api/data'" :row-selection="true" /> </template> <script setup> import {initTable} from 'v-table'; const columns = [ { title: 'ID', width: 60 }, { title: '名称', dataIndex: 'name', width: 120 } ]; const table = initTable({ unique: 'selection-table', column: columns }); // 获取选中行 console.log(table.selectRows); </script>
3.自定义列渲染
<template> <v-table :init="'api/data'"> <template #bodyCell="{ text, record, column }"> <template v-if="column.dataIndex === 'action'"> <a-button @click="handleEdit(record)">编辑</a-button> </template> </template> </v-table> </template> <script setup> import {initTable} from 'v-table'; const columns = [ { title: 'ID', width: 60 }, { title: '名称', dataIndex: 'name', width: 120 }, { title: '操作', dataIndex: 'action', width: 120, fixed: 'right' } ]; const table = initTable({ unique: 'custom-table', column: columns }); const handleEdit = (record) => { console.log('编辑行:', record); }; </script>
