diff --git a/examples/main.ts b/examples/main.ts index 0e77f1bf10..28f8be11cb 100644 --- a/examples/main.ts +++ b/examples/main.ts @@ -1,4 +1,4 @@ -import { createApp } from 'vue' +import { createApp, h } from 'vue' import App from './App.vue' import router from './router' @@ -14,6 +14,18 @@ import './style/index.scss' VxeUI.setI18n('en-US', enUS) +VxeUI.renderer.add('CellImage', { + renderTableDefault (_renderOpts, params) { + const { props } = _renderOpts + const { column, row } = params + return h(VxeUI.VxeImage, { + width: '100%', + ...props, + src: row[column.field] + }) + } +}) + createApp(App) .use(router) .use(VxeUI) diff --git a/package.json b/package.json index 7584b9df03..4f903d0cc6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.9.15", + "version": "4.9.16", "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.3.15" + "vxe-pc-ui": "^4.3.16" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts index 2ebd3406c0..d5029ee8e8 100644 --- a/packages/table/src/body.ts +++ b/packages/table/src/body.ts @@ -164,7 +164,8 @@ export default defineComponent({ const showEllipsis = cellOverflow === 'ellipsis' const showTitle = cellOverflow === 'title' const showTooltip = cellOverflow === true || cellOverflow === 'tooltip' - const hasEllipsis = showTitle || showTooltip || showEllipsis + // 如果表格加上 showOverflow 则不再支持列单独设置 + const hasEllipsis = allColumnOverflow || showTitle || showTooltip || showEllipsis let isDirty const tdOns: any = {} const rest = fullAllDataRowIdData[rowid] diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index 64948a135b..8c686e36a8 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -1078,7 +1078,7 @@ export default defineComponent({ const isCustomVisible = isAllCustom || storageOpts.visible const isCustomFixed = isAllCustom || storageOpts.fixed const isCustomSort = isAllCustom || storageOpts.sort - if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) { + if ((customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) { if (!tableId) { errLog('vxe.error.reqProp', ['id']) return @@ -1218,12 +1218,7 @@ export default defineComponent({ } const calcCellWidth = () => { - const { tableData } = reactData const autoWidthColumnList = computeAutoWidthColumnList.value - if (!tableData.length || !autoWidthColumnList.length) { - reactData.isCalcColumn = false - return nextTick() - } reactData.isCalcColumn = true return nextTick().then(() => { const { fullColumnIdData } = internalData @@ -2523,6 +2518,7 @@ export default defineComponent({ const { editStore, scrollYLoad: oldScrollYLoad } = reactData const { scrollYStore, scrollXStore, lastScrollLeft, lastScrollTop } = internalData const treeOpts = computeTreeOpts.value + const rowOpts = computeRowOpts.value const { transform } = treeOpts const childrenField = treeOpts.children || treeOpts.childrenField let treeData = [] @@ -2586,9 +2582,11 @@ export default defineComponent({ } if (sYLoad) { if (showOverflow) { - const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false) - if (errColumn) { - errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']) + if (!rowOpts.height) { + const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false) + if (errColumn) { + errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']) + } } } @@ -2717,6 +2715,8 @@ export default defineComponent({ } const parseColumns = () => { + const { showOverflow } = props + const rowOpts = computeRowOpts.value const leftList: VxeTableDefines.ColumnInfo[] = [] const centerList: VxeTableDefines.ColumnInfo[] = [] const rightList: VxeTableDefines.ColumnInfo[] = [] @@ -2781,6 +2781,14 @@ export default defineComponent({ reactData.hasFixedColumn = leftList.length > 0 || rightList.length > 0 Object.assign(columnStore, { leftList, centerList, rightList }) if (scrollXLoad) { + if (showOverflow) { + if (!rowOpts.height) { + const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false) + if (errColumn) { + errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']) + } + } + } if (process.env.VUE_APP_VXE_ENV === 'development') { // if (props.showHeader && !props.showHeaderOverflow) { // warnLog('vxe.error.reqProp', ['show-header-overflow']) @@ -3066,7 +3074,7 @@ export default defineComponent({ } const scrollXEvent = (evnt: Event) => { - const { inFooterScroll, inBodyScroll } = internalData + const { inFooterScroll, inBodyScroll, lastScrollTop } = internalData if (inFooterScroll) { return } @@ -3079,10 +3087,17 @@ export default defineComponent({ const bodyElem = tableBody.$el as HTMLDivElement const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : null + const yHandleEl = refScrollYHandleElem.value const wrapperEl = evnt.currentTarget as HTMLDivElement - const { scrollTop, scrollLeft } = wrapperEl + const { scrollLeft } = wrapperEl + const yBodyEl = yHandleEl || bodyElem + let scrollTop = 0 + if (yBodyEl) { + scrollTop = yBodyEl.scrollTop + } const isRollX = true - const isRollY = false + const isRollY = scrollTop !== lastScrollTop + internalData.inVirtualScroll = true setScrollLeft(bodyElem, scrollLeft) setScrollLeft(headerElem, scrollLeft) @@ -3095,7 +3110,7 @@ export default defineComponent({ } const scrollYEvent = (evnt: Event) => { - const { inFooterScroll, inBodyScroll } = internalData + const { inFooterScroll, inBodyScroll, lastScrollLeft } = internalData if (inFooterScroll) { return } @@ -3109,9 +3124,15 @@ export default defineComponent({ const bodyElem = tableBody.$el as HTMLDivElement const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null const rightElem = rightBody ? rightBody.$el as HTMLDivElement : null + const xHandleEl = refScrollXHandleElem.value const wrapperEl = evnt.currentTarget as HTMLDivElement - const { scrollTop, scrollLeft } = wrapperEl - const isRollX = false + const { scrollTop } = wrapperEl + const xBodyEl = xHandleEl || bodyElem + let scrollLeft = 0 + if (xBodyEl) { + scrollLeft = xBodyEl.scrollLeft + } + const isRollX = scrollLeft !== lastScrollLeft const isRollY = true internalData.inVirtualScroll = true @@ -4957,7 +4978,7 @@ export default defineComponent({ nextTick(() => { resolve() }) - }, 50) + }, 30) }) } return nextTick() @@ -5574,33 +5595,37 @@ export default defineComponent({ $xeTable.handleClearEdit(evnt) // 如果配置了选中功能,则为选中状态 if (mouseOpts.selected) { - nextTick(() => $xeTable.handleSelected(params, evnt)) + nextTick(() => { + $xeTable.handleSelected(params, evnt) + }) } } } else { // 如果是激活状态,退则出到上一行/下一行 if (selected.row || actived.row) { - const targetArgs = selected.row ? selected.args : actived.args + const activeParams = selected.row ? selected.args : actived.args if (hasShiftKey) { if (keyboardOpts.enterToTab) { - $xeTable.moveTabSelected(targetArgs, hasShiftKey, evnt) + $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt) } else { - $xeTable.moveSelected(targetArgs, isLeftArrow, true, isRightArrow, false, evnt) + $xeTable.moveSelected(activeParams, isLeftArrow, true, isRightArrow, false, evnt) } } else { if (keyboardOpts.enterToTab) { - $xeTable.moveTabSelected(targetArgs, hasShiftKey, evnt) + $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt) } else { - const _rowIndex = $xeTable.getVTRowIndex(selected.row) + const activeRow = selected.row || actived.row + const activeColumn = selected.column || actived.column + const _rowIndex = $xeTable.getVTRowIndex(activeRow) const etrParams = { - row: selected.row, - rowIndex: $xeTable.getRowIndex(selected.row), - $rowIndex: $xeTable.getVMRowIndex(selected.row), + row: activeRow, + rowIndex: $xeTable.getRowIndex(activeRow), + $rowIndex: $xeTable.getVMRowIndex(activeRow), _rowIndex, - column: selected.column, - columnIndex: $xeTable.getColumnIndex(selected.column), - $columnIndex: $xeTable.getVMColumnIndex(selected.column), - _columnIndex: $xeTable.getVTColumnIndex(selected.column), + column: activeColumn, + columnIndex: $xeTable.getColumnIndex(activeColumn), + $columnIndex: $xeTable.getVMColumnIndex(activeColumn), + _columnIndex: $xeTable.getVTColumnIndex(activeColumn), $table: $xeTable } if (!beforeEnterMethod || beforeEnterMethod(etrParams) !== false) { @@ -5608,14 +5633,14 @@ export default defineComponent({ if (isLastEnterAppendRow) { if (_rowIndex >= afterFullData.length - 1) { $xeTable.insertAt({}, -1).then(({ row: newRow }) => { - $xeTable.scrollToRow(newRow, selected.column) - $xeTable.setSelectCell(newRow, selected.column) + $xeTable.scrollToRow(newRow, activeColumn) + $xeTable.handleSelected({ ...activeParams, row: newRow }, evnt) }) $xeTable.dispatchEvent('enter-append-row', etrParams, evnt) return } } - $xeTable.moveSelected(targetArgs, isLeftArrow, false, isRightArrow, true, evnt) + $xeTable.moveSelected(activeParams, isLeftArrow, false, isRightArrow, true, evnt) if (enterMethod) { enterMethod(etrParams) } @@ -6234,6 +6259,7 @@ export default defineComponent({ Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, autoMinList, scaleList, scaleMinList, autoList, remainList }) }, saveCustomStore (type) { + const { customConfig } = props const tableId = computeTableId.value const customOpts = computeCustomOpts.value const { updateStore, storage } = customOpts @@ -6243,7 +6269,7 @@ export default defineComponent({ const isCustomVisible = isAllCustom || storageOpts.visible const isCustomFixed = isAllCustom || storageOpts.fixed const isCustomSort = isAllCustom || storageOpts.sort - if (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort) { + if ((customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) { if (!tableId) { errLog('vxe.error.reqProp', ['id']) return nextTick() @@ -7133,7 +7159,6 @@ export default defineComponent({ const trEl = evnt.currentTarget as HTMLElement const rowid = trEl.getAttribute('rowid') const row = $xeTable.getRowById(rowid) - console.log(rowid) if (row) { evnt.preventDefault() evnt.preventDefault() @@ -7370,7 +7395,8 @@ export default defineComponent({ } tablePrivateMethods.checkScrolling() internalData.lastScrollLeft = scrollLeft - } else { + } + if (isRollY) { const yThreshold = computeScrollYThreshold.value isTop = scrollTop <= 0 if (!isTop) { @@ -8322,8 +8348,10 @@ export default defineComponent({ const customOpts = computeCustomOpts.value const mouseOpts = computeMouseOpts.value const rowOpts = computeRowOpts.value - if (!props.id && props.customConfig && (customOpts.storage === true || (customOpts.storage && customOpts.storage.resizable) || (customOpts.storage && customOpts.storage.visible))) { - errLog('vxe.error.reqProp', ['id']) + if (!props.id) { + if ((props.customConfig ? isEnableConf(customOpts) : customOpts.enabled) && customOpts.storage) { + errLog('vxe.error.reqProp', ['id']) + } } if (props.treeConfig && checkboxOpts.range) { errLog('vxe.error.noTree', ['checkbox-config.range']) diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 063770b3f4..350443f1cb 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -75,6 +75,8 @@ VxeUI.setConfig({ // visibleMethod () {} // }, customConfig: { + // enabled: false, + storage: true, allowVisible: true, allowResizable: true, allowFixed: true,