# Table-pro 全新的虚拟表格 🎉 V2.4.52
TIP
针对 Table-v2 虚拟表格存在的一些限制问题，进行了技术升级，以提升其兼容性，适配更多应用场景。使用前请详细阅读文档。
# 代码演示
TIP
问题一：右侧固定列在初始化时没有正确显示阴影效果
this.$refs.virtualScroll.observeTable()
1
问题二：右侧滚动条头部没有正确显示背景色
在操作列上设置 last-column
<w-table-pro-column profixed="right" last-column label="操作" width="100" />
1
# API
# Table-pro Attributes (继承 w-table 及 w-table-column 的属性)
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| data | 总数据 | Array | 必填 | ||
| key-prop | key 值，data 数据中的唯一 id【⚠️ 若 keyProp 未设置或 keyProp 值不唯一，可能导致表格空数据或者滚动时渲染的数据断层、不连贯、滚动不了】 | string | — | id | |
| item-height | 每一行的预估高度 | number | — | 40 | |
| scroll-box | 指定滚动容器；在指定滚动容器时，如果表格设置了 height 高度，则滚动容器为表格内的滚动容器；如果表格未设置 height 高度，则自动获取外层的滚动容器，直至 window 容器为止 | string | 'window'、css 选择器 | - | |
| buffer | 顶部和底部缓冲区域，值越大显示表格的行数越多 | Number | — | 200 | |
| throttle-time | 滚动事件的节流时间 | number | — | 16 | |
| dynamic | 动态获取表格行高度，默认开启。设置为 false 时，则以 itemHeight 为表格行的真实高度，能大大减少虚拟滚动计算量，减少滚动白屏；如果 itemHeight 与表格行的真实高度不一致，可能导致滚动时表格数据错乱、抖动、底部有空白 | boolean | — | true | |
| virtualized | 是否开启虚拟滚动 | boolean | — | true | |
| row-span-key | 当使用了 w-table 的合并行，必须设置 rowSpanKey 函数并返回每组合并行中共用的 key 值 | Function(row, index) | — | - | |
| selection-sort | 支持多选可自定义选中数据的排序规则，默认为 true 按选择顺序排，传入 false 为按列表中的顺序排，传入函数为自定义排序规则 | Boolean、Function | — | - | |
| getWTable | 获取 <w-table> 组件，默认获取 <w-table-pro> 的第一个子组件；如果 <w-table> 组件经过用户封装，那么需要使用该方法返回正确的 <w-table> 组件【可通过 ref、$children 返回正确的值】 | Function | — | - | |
| keep-scroll | 当使用 v-show，keep-alive 切换表格显示时，会保持原来滚动位置 | boolean | — | true | |
| scroll-to-button | 是否开启滚动按钮，默认关闭 | boolean | — | false | V2.6.24 |
| virtual-columns | 是否开启列虚拟（横向列窗口），默认关闭 | boolean | — | false | V2.6.29 |
| column-buffer | 列虚拟时，可视窗口左右额外渲染的列数 | number | — | 3 | V2.6.29 |
| columns | 列配置数组（配置驱动宽表时配合 w-table-pro-columns） | Array | — | - | V2.6.29 |
| persist-table-key | 表格本地记忆标识。设置后透传给内层 w-table（via inject）；规则与 Table Attributes 一致：须显式传入 width 且具备 persist-column-key（或 prop）的列才参与记忆，未设置 width 不记忆。不需要记忆的列可设 persist-exclude | String | — | — | V2.6.32 |
# Methods
| 方法名 | 说明 | 参数 | Version |
|---|---|---|---|
| clearPersistColumn | 清除单列列宽记忆，委托内层 w-table | column | V2.6.32 |
| clearPersistPrefs | 清除当前表或指定表全部列宽记忆 | persistTableKey? | V2.6.32 |
| clearAllPersistPrefs | 清除全部表格列宽记忆，慎用 | — | V2.6.32 |
| scrollTo | 滚动到第几行；index - 行数索引值；offset - 偏移位置 | (index: number, offset: number) | |
| scrollToRow | 滚动到对应的行；row；offset - 偏移位置 | (row: object, offset: number) | |
| update | 更新，会重新计算实际渲染数据和位置 | - | |
| slowOnMousewheel | 为减缓滚轮滚动速度，可使用 slowNum 参数（默认值为 1），数值越大，滚动越慢。在 macOS 系统上，使用 Chrome 或 Firefox 浏览器，在 自定义固定列 的表格中快速滚动时，可能会出现白屏现象。通过调整该参数，可有效缓解此问题。 | slowNum | |
| getParentNode | 【扩展树形表格】获取父节点 | row | |
| getParentNodes | 【扩展树形表格】获取所有父节点 | row | |
| getChildNodes | 【扩展树形表格】获取子节点 | row | |
| reloadNode | 【扩展树形表格】重新加载节点 | row | |
| expandAllNodes | 【扩展树形表格】展开所有树节点 | - | |
| unexpandAllNodes | 【扩展树形表格】收起所有树节点，懒加载节点除外 | - | |
| scrollToBottom | 滚动到表格底部 | V2.6.24 | |
| scrollToTop | 滚动到表格顶部 | V2.6.24 |
# Events
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| change | 计算完成真实显示的表格行数 | (renderData, start, end)：renderData 真实渲染的数据，start 和 end 指的是渲染的数据在总数据的开始到结束的区间范围 | |
| column-window-change | 列虚拟：横向滚动后当前挂载的列窗口变化时触发（colStart/colEnd 或窗口列 key 变化才触发，非每次 scroll 都触发） | 见下方 | |
| scroll-to-top | 滚动到顶部 | - | V2.6.24 |
| scroll-to-bottom | 滚动到底部 | - | V2.6.24 |
column-window-change 回调参数（对象）：
| 字段 | 说明 |
|---|---|
colStart / colEnd | 中间可滚动区列配置中的窗口起止索引（含 column-buffer） |
windowColumnKeys | 当前窗口内中间列的 key 列表 |
pinnedLeftKeys / pinnedRightKeys | 左/右固定列 key（始终挂载） |
renderedKeys | 当前 DOM 中实际渲染的列 key（左固定 + 窗口 + 右固定，不含占位列） |
windowColumns | 窗口内中间列的 meta 对象数组（与 columns 项结构一致） |
pinnedLeft / pinnedRight | 固定列 meta |
scrollLeft | 表格横向 scrollLeft |
leftSpacerWidth / rightSpacerWidth | 左右占位列宽度（px） |
# Table-pro-column Attributes (继承 w-table-column 的属性)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| * | 支持 <w-table-column> 组件的 props 属性，如 label, fixed, prop, width, min-width, index 等等 | - | — | - |
| type | type="index" 为索引；type="selection" 为多选；type="expand" 为扩展行；type="tree" 为树形表格 | String | 选填 | |
| profixed | 固定列。由于使用固定列会增加表格的 DOM 结构生成，可能影响性能，因此推荐使用 position: sticky 实现固定列效果。该方式不会生成额外的 <table>，能带来更顺滑的滚动体验 | String/Boolean | left/right/true | - |