# Table-pro 全新的虚拟表格 🎉 V2.4.52

# 🧀 使用

# 1、确保 <w-table> 表格位于 <w-table-pro> 组件内部；将原始数据传递给 <w-table-pro> 的 data 属性，并设置 itemHeight 属性（取值为表格行的预估高度）；将 <w-table-pro> 的 change 事件回调参数传递给 <w-table> 的 data 属性。

<w-table-pro :data="regionData" :item-height="28" @change="(val) => tableData = val">
<w-table :data="tableData" row-key="id">
// 建议在 `<w-table>` 组件中显式指定 row-key 属性，以避免潜在的问题
</w-table>
</w-table-pro>

# 2、使用 <w-table-pro> 实现表格虚拟滚动时，不支持 WinDesign 表格原有的索引、多选、扩展行等功能。若需兼容这些功能，请使用 <w-table-pro-column> 组件

<w-table-pro :data="regionData" :item-height="28" @change="(val) => tableData = val">
<w-table :data="tableData">
<w-table-pro-column type="selection" :selectable="getSelectable" width="60">
</w-table-pro-column>
</w-table>
</w-table-pro>

# 3、滚动卡顿、白屏问题

为减缓滚轮滚动速度，可使用 slowNum 参数（默认值为 1），数值越大，滚动越慢。在 macOS 系统上，使用 Chrome 或 Firefox 浏览器，在 自定义固定列 的表格中快速滚动时，可能会出现白屏现象。通过调整该参数，可有效缓解此问题。

this.$refs.virtualScroll.slowOnMousewheel(2)

# 3、表格高度设置

• 表格无固定高度（自动查找最近的父级滚动容器）
• 固定高度（如 400px，表格内部滚动）
• 高度 100% 撑满容器高度
• 可通过 scroll-box=".scroller-box" 指定自定义滚动容器

# 3、行高度设置

• 表格行高度不确定时：可以传入一个预估的 itemHeight。但需注意，如果 itemHeight 与实际行高不一致，可能会导致滚动时出现数据错乱、抖动或底部留白等问题。

• 表格行高度确定时：请先将 dynamic 设置为 false（默认为 true），再传入准确的 itemHeight，可显著降低虚拟滚动的计算开销，减少滚动过程中的白屏现象。

# 4、固定列问题

由于使用固定列会增加表格的 DOM 结构生成，可能影响性能，因此推荐使用 position: sticky 实现固定列效果。该方式不会生成额外的 <table>，能带来更顺滑的滚动体验。

使用 sticky 固定列时，请注意以下几点：

• 需设置表格的 headerCellStyle 和 cellStyle 样式，以确保固定效果正确；

• 固定列的组件应按照顺序排布在最左侧或最右侧，避免中间插入非固定列，确保布局逻辑一致。

# 代码演示

this.$refs.virtualScroll.observeTable()

<w-table-pro-column profixed="right" last-column label="操作" width="100" />

# API

# Table-pro Attributes (继承 w-table 及 w-table-column 的属性)

# Methods

# Events

# Table-pro-column Attributes (继承 w-table-column 的属性)