虚拟滚动可编辑表格ReVirtualEditTable
组件实现基于
Vue3+Element Plus+Typescript，同时引用vueUse+lodash-es+tailwindCss(不影响功能，可忽略)
在
ReEditTable的基础上，增加虚拟滚动功能。
:::warning
虚拟滚动需要固定行高，表单控件避免使用高度会动态变化的组件。
:::
思路
由于基于ElTable组件，同时滚动容器由ElTableBody控制，因此想要控制前置内容和后置内容需要通过DOM操作才行，提供了 table-virtual 进行ElTable支持虚拟滚动的统一DOM操作方法，其中核心的虚拟滚动计算一样是基于 useVirtualScroll hook实现。
在ReEditTable渲染后，通过DOM操作在ElTableBody的滚动容器中注入前置Div节点和后置Div节节点，经过滚动计算后得到的前置高度和后置高度，更新前置Div节点和后置Div节节点 的 height 样式撑开容器。
局限
行高高度需要固定，暂不直接支持动态的行高高度，支持父组件通过指定 rowHeight 为函数动态返回行高来实现动态支持，需要父组件自行维护每行的高度，把性能问题交由父组件决定。
基础
查看 /demo/table/virtual-edit-table.md
ReVirtualEditTable属性
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| maxHeight | 表格高度 | number | - |
| previewRows | 前后预加载数量，默认同 pageSize | number | - |
| skeleton | 开启css骨架屏 | boolean | true |
| pageSize | 虚拟滚动显示页大小 | number | 20 |
| rowHeight | 行高 | number ｜ ((index: number) => number) | - |
| defaultRowHeight | 默认行高 | number | - |
除了上述属性之外，ReEditTable属性均支持，默认会被ReEditTable实例继承
ReVirtualEditTable事件
| 事件名 | 说明 | 格式 |
|---|---|---|
| update:data | 绑定数据更新时触发 | (data: Record<string, any>[]) => void |
除了上述事件之外，ReEditTable支持的事件也支持，默认会被ReEditTable实例继承
ReVirtualEditTable插槽
| 插槽名 | 说明 |
|---|---|
| empty | 空状态展示 |
| toolbox-left | 页头工具栏左侧内容插槽，可用于自定义新增按钮 |
| toolbox-right | 页头工具栏右侧内容插槽，可用于自定义附加按钮 |
| add-bottom-button | 页脚新增按钮插槽，用于自定义页脚的新增按钮，只有在 showAddBtn 且 addBtnPosition="bottom" 时有效 |
除了上述插槽之外，列配置项配置的插槽也支持。如果是自定义控件，列配置需要指定插槽
ReVirtualEditTable Expose
| 字段 | 说明 | 类型 |
|---|---|---|
| editTableRef | ReEditTable组件实例 | InstanceType<typeof ReEditTable> |
| maxHeight | 编辑表格高度 | number |
| startIndex | 虚拟滚动列表起始索引 | number |
| endIndex | 虚拟滚动列表结束索引 | number |
| toAdd | 增加一行 | () => void |
| toDelete | 删除指定行 | ($index: number) => void |
| toEdit | 编辑指定行 | ($index: number) => void |
| toEditCell | 编辑指定单元格 | ($index: number, prop: string) => void |
| cancelEditRow | 取消指定行编辑状态 | ($index: number) => void |
| cancelEditCell | 取消指定单元格编辑状态 | ($index: number, prop: string) => void |
| validate | 整个编辑表格校验 | (callback?: (valid: boolean) => void) => void |
| validateRow | 指定行校验 | (index: number, callback?: (valid: boolean) => void) => void |
| validateCell | 指定单元格校验 | (index: number, prop: string, callback?: (valid: boolean) => void) => void |
源代码
/components/ReTable/src/virtual-editor.vue
可以通过查看具体实现，如果遇到问题可以留言或者提出issue。
