页面级的分页表格组件RePageTable
组件实现基于
Vue3+Element Plus+Typescript，同时引用vueUse+lodash-es+tailwindCss(不影响功能，可忽略)
基于自封的分页表格组件ReTable进行的功能扩展，主要用于直接渲染页面级的分页表格，除了表格分页功能，还集成了一些表格控制功能，如边框、条纹展示、列框调整、全屏、列显示/隐藏/改变顺序的功能。
功能图标基于iconify图标，采用离线的加载方式引入。
思路
表格分页功能基本不变，全部直接继承ReTable组件，主要在RePageTable增加一些动态配置ReTable组件属性的控制，如边框、条纹的显示，以及尺寸、间距的控制，重点功能还是列配置。
ReTable列头配置基于v-for动态渲染，因此可以轻松的通过控制列头配置项进行顺序控制、显隐控制。通过ElPopover显示列配置面板，基于vue-draggable实现拖拽功能。
基于插件的页面功能，在工具栏左侧也提供插槽方便放置常见的按钮组。
基础
支持控制自定义功能的展示和隐藏。
查看 /demo/table/page-table.md
RePageTable属性
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fullscreenTarget | 全屏元素，默认取组件根节点的父节点 | HTMLElement ｜ () => HTMLElement | - |
| defaultGutter | 默认表格间距 | string | - |
| defaultSize | 默认表格尺寸 | string | - |
| defaultBorder | 默认是否表格带边框 | string | - |
| defaultStripe | 默认是否是条纹表格 | string | - |
| defaultResizable | 默认是否可拖拽 | string | - |
| showResizeIcon | 是否显示可拖拽改变列宽Icon | boolean | true |
| showGutterIcon | 是否显示表格间距切换Icon | boolean | true |
| showSizeIcon | 是否显示表格尺寸切换Icon | boolean | false |
| showBorderIcon | 是否显示表格边框切换Icon | boolean | true |
| showStripeIcon | 是否显示条纹表格切换Icon | boolean | true |
| showFullscreenIcon | 是否显示全屏展示切换Icon | boolean | true |
| showSettingIcon | 是否显示列配置Icon | boolean | true |
| defaultMinWidth | 默认最小列宽 | string ｜ number | 56 |
| columns | 必填，RePageTable列配置 | RePageTableColumn[] | - |
除了上述字段之外，ReTable支持的属性均支持，默认会被ReTable实例继承
RePageTableColumn字段
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fixed-show | 列是否固定展示，不能被隐藏，只在 showSettingIcon 生效时有效 | boolean | false |
| defaul-show | 列是否默认展示 | boolean | true |
| ignore-resizable | 列是否支持改变大小，默认会继承 RePageTable.resizable | boolean | false |
除了上述字段以外，ReTableColumn字段也都支持
RePageTable事件
| 事件名 | 说明 | 格式 |
|---|---|---|
| refresh | 点击刷新icon后触发 | () => void |
| reset | 点击列配置重置后触发 | () => void |
除了上述事件之外，ReTable支持的事件也支持，默认会被ReTable实例继承
RePageTable插槽
| 插槽名 | 说明 |
|---|---|
| empty | 空状态展示 |
| toolbox-left | 工具栏左侧内容插槽，通常用于放置批量处理功能按钮 |
| toolbox-right | 工具栏右侧内容插槽，插槽内容在默认工具功能之前 |
除了上述插槽之外，列配置项配置的插槽也支持
RePageTable Expose
| 字段 | 说明 | 类型 |
|---|---|---|
| reTableRef | ReTable组件实例 | InstanceType<typeof ReTable> |
源代码
/components/ReTable/src/page.vue
可以通过查看具体实现，如果遇到问题可以留言或者提出issue。
