diff --git a/examples/views/table/TableTest9.vue b/examples/views/table/TableTest9.vue index 09ba100d4c..449897db82 100644 --- a/examples/views/table/TableTest9.vue +++ b/examples/views/table/TableTest9.vue @@ -32,10 +32,6 @@ const gridOptions = reactive>({ columnConfig: { resizable: true }, - scrollX: { - enabled: true, - gt: 0 - }, scrollY: { enabled: true, gt: 0 @@ -48,9 +44,9 @@ const gridOptions = reactive>({ { title: '列3', field: 'col3', width: 200 }, { title: '列4', field: 'col4', width: 140 }, { title: '列5', field: 'col5', width: 300 }, - { title: '列6', field: 'col6', width: 160 }, - { title: '列7', field: 'col7', width: 120 }, - { title: '列8', field: 'col8' } + { title: '列6', field: 'col6', minWidth: 160 }, + { title: '列7', field: 'col7', minWidth: 120 }, + { title: '列8', field: 'col8', minWidth: 120 } ], data: [] }) @@ -66,7 +62,9 @@ const loadData = (rowSize: number) => { imgUrl: i % 3 === 0 ? 'https://vxeui.com/resource/img/546.gif' : 'https://vxeui.com/resource/img/673.gif' } for (let j = 0; j < 10; j++) { - if (i % 8 === 0) { + if (i % 9 === 0) { + item[`col${j}`] = `值_${i}_${j} 内容9内容9 内容9内容9内容9 内容9内容9内容9内容9 内容9内容9内容9内容9 内容9内容9内容9 内容9内容9` + } else if (i % 8 === 0) { item[`col${j}`] = `值_${i}_${j} 内容8内容8内容8内容8` } else if (i % 7 === 0) { item[`col${j}`] = `值_${i}_${j} 内容7内容7` diff --git a/package.json b/package.json index ccaa1e3c80..c4b1c2a298 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.8.0-beta.4", + "version": "4.8.0-beta.6", "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...", "scripts": { "update": "npm install --legacy-peer-deps", @@ -28,7 +28,7 @@ "style": "lib/style.css", "typings": "types/index.d.ts", "dependencies": { - "vxe-pc-ui": "^4.2.36" + "vxe-pc-ui": "^4.2.37" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/table/module/export/export-panel.ts b/packages/table/module/export/export-panel.ts index d8651572c6..065e3aacc9 100644 --- a/packages/table/module/export/export-panel.ts +++ b/packages/table/module/export/export-panel.ts @@ -162,12 +162,11 @@ export default defineComponent({ const { hasTree, hasMerge, isPrint, hasColgroup, columns } = storeData const { isHeader } = defaultOptions const cols: any[] = [] - const exportOpts = computeExportOpts.value const checkedAll = computeCheckedAll.value const showSheet = computeShowSheet.value const supportMerge = computeSupportMerge.value const supportStyle = computeSupportStyle.value - const slots = exportOpts.slots || {} + const slots = defaultOptions.slots || {} const topSlot = slots.top const bottomSlot = slots.bottom const defaultSlot = slots.default @@ -238,9 +237,9 @@ export default defineComponent({ const params = { $table: $xeTable, $grid: $xeTable.xegrid, - options: exportOpts, + options: defaultOptions, columns, - params: exportOpts.params as any + params: defaultOptions.params as any } return h('div', { class: 'vxe-table-export--panel' @@ -476,9 +475,9 @@ export default defineComponent({ const params = { $table: $xeTable, $grid: $xeTable.xegrid, - options: exportOpts, + options: defaultOptions, columns, - params: exportOpts.params as any + params: defaultOptions.params as any } return h('div', { class: 'vxe-table-export--panel-footer' diff --git a/packages/table/module/export/import-panel.ts b/packages/table/module/export/import-panel.ts index 7ab1763976..0352d66d68 100644 --- a/packages/table/module/export/import-panel.ts +++ b/packages/table/module/export/import-panel.ts @@ -94,11 +94,10 @@ export default defineComponent({ const renderVN = () => { const { defaultOptions, storeData } = props - const importOpts = computeImportOpts.value const selectName = computeSelectName.value const hasFile = computeHasFile.value const parseTypeLabel = computeParseTypeLabel.value - const slots = importOpts.slots || {} + const slots = defaultOptions.slots || {} const topSlot = slots.top const bottomSlot = slots.bottom const defaultSlot = slots.default @@ -129,8 +128,8 @@ export default defineComponent({ const params = { $table: $xeTable, $grid: $xeTable.xegrid, - options: importOpts, - params: importOpts.params as any + options: defaultOptions, + params: defaultOptions.params as any } return h('div', { class: 'vxe-table-export--panel' @@ -206,8 +205,8 @@ export default defineComponent({ const params = { $table: $xeTable, $grid: $xeTable.xegrid, - options: importOpts, - params: importOpts.params as any + options: defaultOptions, + params: defaultOptions.params as any } return h('div', { class: 'vxe-table-export--panel-footer' diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts index 37f0d607a5..4ed04bf64d 100644 --- a/packages/table/src/body.ts +++ b/packages/table/src/body.ts @@ -348,7 +348,7 @@ export default defineComponent({ key: columnKey || columnOpts.useKey ? colid : $columnIndex, ...attrs, style: Object.assign({ - height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : (scrollYLoad ? `${rest.height || scrollYRHeight || rowHeight}px` : '') + height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : (scrollYLoad ? `${rest.height || 24}px` : '') }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle), ...tdOns }, tdVNs) diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index 313921b390..7cea7e67e7 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -2370,6 +2370,7 @@ export default defineComponent({ // 计算可视渲染相关数据 const computeScrollLoad = () => { return nextTick().then(() => { + const { showOverflow } = props const { scrollXLoad, scrollYLoad } = reactData const { scrollXStore, scrollYStore } = internalData const sYOpts = computeSYOpts.value @@ -2377,7 +2378,9 @@ export default defineComponent({ // 计算 X 逻辑 if (scrollXLoad) { const { visibleSize: visibleXSize } = handleVirtualXVisible() - const offsetXSize = sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : (browse.edge ? 5 : 0) + // 动态列缓冲量 + const bufferSize = showOverflow ? 0 : 2 + const offsetXSize = Math.max(bufferSize, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : (browse.edge ? 5 : 0)) scrollXStore.offsetSize = offsetXSize scrollXStore.visibleSize = visibleXSize scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex) @@ -2392,7 +2395,9 @@ export default defineComponent({ reactData.rowHeight = rowHeight const { visibleSize: visibleYSize } = handleVirtualYVisible() if (scrollYLoad) { - const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0) + // 动态高缓冲量 + const bufferSize = showOverflow ? 0 : 2 + const offsetYSize = Math.max(bufferSize, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0)) scrollYStore.offsetSize = offsetYSize scrollYStore.visibleSize = visibleYSize scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex)