diff --git a/CHANGELOG.md b/CHANGELOG.md index 9879dfd67218878b4e2384539a009e58bea05163..30b54c237a48fccc76cd01027ca9605fb979cdcf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,8 @@ - 日历天样式支持显示开始及结束时间包含了当前选中时间的事件项,调整事件项高度计算逻辑 - 日历周、天样式适配单双击逻辑及右键菜单逻辑与其它日历样式保持一致 - 调整日历样式与主题同步 +- 优化虚拟表格滚动条样式 + ### Fixed diff --git a/src/control/grid/virtualized-table/virtualized-table.scss b/src/control/grid/virtualized-table/virtualized-table.scss index 71423a6fdc4687b229f5a46780adee6b166751fb..b32182adfb62f25c389509b4b0c1205beb4029b7 100644 --- a/src/control/grid/virtualized-table/virtualized-table.scss +++ b/src/control/grid/virtualized-table/virtualized-table.scss @@ -107,6 +107,16 @@ $control-virtualized-table-footer: ( height: 100%; } + .el-virtual-scrollbar { + &.el-vl__horizontal { + height: getCssVar(control-virtualized-table, scrollbar-width) !important; + } + + &.el-vl__vertical { + width: getCssVar(control-virtualized-table, scrollbar-width) !important; + } + } + // 清除边框线 .el-table-v2__header-row, .el-table-v2__row { @@ -259,7 +269,7 @@ $control-virtualized-table-footer: ( position: absolute; top: 0; - right: 0; + right: 2px; z-index: 1; height: getCssVar(control-virtualized-table, now-header-height); padding-right: getCssVar(spacing, extra-tight); diff --git a/src/control/grid/virtualized-table/virtualized-table.tsx b/src/control/grid/virtualized-table/virtualized-table.tsx index fc122f84bc6f3945c2e5d2a7380754ccd8a81dcb..f17ef67ab386a827f6ddef1bfea0d27c83cce2e8 100644 --- a/src/control/grid/virtualized-table/virtualized-table.tsx +++ b/src/control/grid/virtualized-table/virtualized-table.tsx @@ -349,6 +349,8 @@ export const VirtualizedTableControl = defineComponent({ row-height={54} columns={columns} header-height={54} + hScrollbarSize={4} + vScrollbarSize={4} data={this.tableData} class={this.ns.e('table')} row-class={this.calcRowClass} diff --git a/src/control/grid/virtualized-table/virtualized-table.util.ts b/src/control/grid/virtualized-table/virtualized-table.util.ts index 864ae5c82c65a1a8c09457751e735b8b0c744732..d5d5b8dd2a88b094397829f13fe4ae379668c126 100644 --- a/src/control/grid/virtualized-table/virtualized-table.util.ts +++ b/src/control/grid/virtualized-table/virtualized-table.util.ts @@ -363,10 +363,10 @@ export function useVirtualizedTable( // 如果没有配置自适应列,则最后一列变为自适应列 if (!adaptiveColumn.length) adaptiveColumn = [showColumns[showColumns.length - 1]]; - const width = (bodyWidth - totalWidth) / adaptiveColumn.length - 6; - adaptiveColumn.forEach(column => - Object.assign(column, { width: column.width + width }), - ); + const width = (bodyWidth - totalWidth - 6) / adaptiveColumn.length; + adaptiveColumn.forEach(column => { + column.width += width; + }); } return columns; }