Base on element-ui, supports pagination, tree data structure, custom search, custom operation column
npm install @leiyin/v-data-table一个基于 Vue 3 + Element Plus 的配置化数据表格组件,集成了查询表单、分页、工具栏和复杂的列配置功能。
---
- 🚀 配置驱动:通过 JSON 配置快速生成表格列和搜索表单。
- 🔍 集成搜索:内置基于 @leiyin/v-form-renderer 的搜索表单,支持自动触发查询。
- 📡 自动数据请求:只需提供 dataRequest 函数,组件自动处理 Loading 状态、分页参数和数据回显。
- 🧩 灵活列配置:支持多级表头、自定义渲染(Formatter/VNode)、操作列按钮配置。
- 💾 状态保持:支持跨页勾选保持 (persistSelection),单选多选操作。
- 🛠 内置工具栏:支持列显隐设置、密度调整,提供顶部和左侧工具栏插槽。
---
``bash`
pnpm add @leiyin/v-data-table依赖 element-plus 和 @leiyin/v-form-renderer
---
`vue
:columns="columns"
:search-form="searchConfig"
>
`
---
| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| dataRequest | (params) => Promise | - | 数据请求函数,需返回包含 list 和 total 的对象(字段名可通过 content/totalContent 配置) |TableColumn[]
| columns | | [] | 表格列配置 |SearchFormContent[]
| searchForm | | [] | 搜索表单配置 |Boolean
| enablePagination | | true | 是否显示分页 |Number
| defaultSize | | 20 | 默认每页条数 |Object
| customQuery | | {} | 请求时的额外固定参数 |String
| id | | 'id' | 数据主键 Key,用于跨页勾选等 |Boolean
| persistSelection | | false | 是否开启跨页勾选保持 |Boolean
| isSingleSelect | | false | 是否开启单选模式 |Boolean
| hideTool | | false | 是否隐藏工具栏 |Boolean
| immediate | | true | 是否在挂载时立即请求数据 |Array
| dataSource | | null | 静态数据源(当不使用 dataRequest 时使用) |Object
| tableAttrs | | {} | 透传给 Element Plus Table 的属性 |String[]
| content | | ['list'] | 响应数据中列表数据的路径 |String
| totalContent | | 'total' | 响应数据中总条数的路径 |String
| tablebScene | | '' | 表格唯一标识,用于保存筛选条件等状态 |Function
| summaryMethod | | - | 自定义合计行方法 |Function
| spanMethod | | - | 自定义合并行方法 |
继承自 Element Plus TableColumn,额外支持:
| 属性名 | 类型 | 说明 |
| --- | --- | --- |
| setBtns | (row, index) => TableColumnBtn[] | 仅当 prop 为 'operation' 时生效,配置操作列按钮 |TableColumn[]
| columns | | 用于配置多级表头 |Function
| formatter | | 支持返回 VNode 或 String |
| 插槽名 | 参数 | 说明 |
| --- | --- | --- |
| tool-top | { selected, resData } | 顶部工具栏区域(搜索栏下方,表格上方) |{ selected, resData, requsetDto }
| tool-fl | | 表格左上角工具栏(常用于放置“新建”等操作) |
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| search | 搜索表单提交时触发 | (params: any)` |