@blueking/vxe-table

import { defineComponent, h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue' import XEUtils from 'xe-utils' import { browse, initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../ui/src/dom' import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils' import { VxeUI } from '../../ui' import Cell from './cell' import TableBodyComponent from './body' import TableHeaderComponent from './header' import TableFooterComponent from './footer' import tableProps from './props' import tableEmits from './emits' import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth } from './util' import { getSlotVNs } from '../../ui/src/vn' import { warnLog, errLog } from '../../ui/src/log' import TableCustomPanelComponent from '../module/custom/panel' import TableFilterPanelComponent from '../module/filter/panel' import TableImportPanelComponent from '../module/export/import-panel' import TableExportPanelComponent from '../module/export/export-panel' import TableMenuPanelComponent from '../module/menu/panel' import type { VxeLoadingComponent, VxeTooltipInstance, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType } from 'vxe-pc-ui' import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes } from '../../../types' const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI const customStorageKey = 'VXE_CUSTOM_STORE' const settingColumnWidth = 40 export default defineComponent({ name: 'VxeTable', props: tableProps, emits: tableEmits, setup (props, context) { const { slots, emit } = context const xID = XEUtils.uniqueId() // 使用已安装的组件，如果未安装则不渲染 const VxeUILoadingComponent = VxeUI.getComponent<VxeLoadingComponent>('VxeLoading') const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip') const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null) const { computeSize } = useFns.useSize(props) const reactData = reactive<TableReactData>({ isCalcColumn: false, // 低性能的静态列 staticColumns: [], // 渲染的列分组 tableGroupColumn: [], // 可视区渲染的列 tableColumn: [], // 渲染中的数据 tableData: [], // 是否启用了横向 X 可视渲染方式加载 scrollXLoad: false, // 是否启用了纵向 Y 可视渲染方式加载 scrollYLoad: false, // 是否存在纵向滚动条 overflowY: true, // 是否存在横向滚动条 overflowX: false, // 纵向滚动条的宽度 scrollbarWidth: 0, // 横向滚动条的高度 scrollbarHeight: 0, // 最后滚动时间戳 lastScrollTime: 0, // 行高 rowHeight: 0, // 表格父容器的高度 parentHeight: 0, // 是否使用分组表头 isGroup: false, isAllOverflow: false, // 复选框属性，是否全选 isAllSelected: false, // 复选框属性，有选中且非全选状态 isIndeterminate: false, // 复选框属性，已选中的行集合 selectCheckboxMaps: {}, // 当前行 currentRow: null, // 单选框属性，选中列 currentColumn: null, // 单选框属性，选中行 selectRadioRow: null, // 表尾合计数据 footerTableData: [], // 展开列信息 expandColumn: null, // 树节点列信息 treeNodeColumn: null, hasFixedColumn: false, // 已展开的行集合 rowExpandedMaps: {}, // 懒加载中的展开行的集合 rowExpandLazyLoadedMaps: {}, // 已展开树节点集合 treeExpandedMaps: {}, // 懒加载中的树节点的集合 treeExpandLazyLoadedMaps: {}, // 树节点不确定状态的集合 treeIndeterminateMaps: {}, // 合并单元格的对象集 mergeList: [], // 合并表尾数据的对象集 mergeFooterList: [], // 刷新列标识，当列筛选被改变时，触发表格刷新数据 upDataFlag: 0, // 刷新列标识，当列的特定属性被改变时，触发表格刷新列 reColumnFlag: 0, // 已标记的对象集 pendingRowMaps: {}, // 初始化标识 initStore: { filter: false, import: false, export: false, custom: false }, // 自定义列相关的信息 customStore: { btnEl: null, isAll: false, isIndeterminate: false, activeBtn: false, activeWrapper: false, visible: false, maxHeight: 0, oldSortMaps: {}, oldFixedMaps: {}, oldVisibleMaps: {} }, customColumnList: [], // 当前选中的筛选列 filterStore: { isAllSelected: false, isIndeterminate: false, style: null, options: [], column: null, multiple: false, visible: false, maxHeight: null }, // 存放列相关的信息 columnStore: { leftList: [], centerList: [], rightList: [], resizeList: [], pxList: [], pxMinList: [], autoMinList: [], scaleList: [], scaleMinList: [], autoList: [], remainList: [] }, // 存放快捷菜单的信息 ctxMenuStore: { selected: null, visible: false, showChild: false, selectChild: null, list: [], style: null }, // 存放可编辑相关信息 editStore: { indexs: { columns: [] }, titles: { columns: [] }, // 选中源 selected: { row: null, column: null }, // 已复制源 copyed: { cut: false, rows: [], columns: [] }, // 激活 actived: { row: null, column: null }, // 当前被强制聚焦单元格，只会在鼠标点击后算聚焦 focused: { row: null, column: null }, insertMaps: {}, removeMaps: {} }, // 存放 tooltip 相关信息 tooltipStore: { row: null, column: null, content: null, visible: false, currOpts: {} }, // 存放数据校验相关信息 validStore: { visible: false }, validErrorMaps: {}, // 导入相关信息 importStore: { inited: false, file: null, type: '', modeList: [], typeList: [], filename: '', visible: false }, importParams: { mode: '', types: null, message: true }, // 导出相关信息 exportStore: { inited: false, name: '', modeList: [], typeList: [], columns: [], isPrint: false, hasFooter: false, hasMerge: false, hasTree: false, hasColgroup: false, visible: false }, exportParams: { filename: '', sheetName: '', mode: '', type: '', isColgroup: false, isMerge: false, isAllExpand: false, useStyle: false, original: false, message: true, isHeader: false, isFooter: false }, scrollVMLoading: false, isCalcCellHeight: 0, isCustomStatus: false, isDragRowMove: false, dragRow: null, isDragColMove: false, dragCol: null, dragTipText: '', _isResize: false, isLoading: false }) const internalData: TableInternalData = { tZindex: 0, elemStore: {}, // 存放横向 X 虚拟滚动相关的信息 scrollXStore: { preloadSize: 0, offsetSize: 0, visibleSize: 0, visibleStartIndex: 0, visibleEndIndex: 0, startIndex: 0, endIndex: 0 }, // 存放纵向 Y 虚拟滚动相关信息 scrollYStore: { preloadSize: 0, offsetSize: 0, visibleSize: 0, visibleStartIndex: 0, visibleEndIndex: 0, startIndex: 0, endIndex: 0 }, // 表格宽度 tableWidth: 0, // 表格高度 tableHeight: 0, // 表头高度 headerHeight: 0, // 表尾高度 footerHeight: 0, customHeight: 0, customMinHeight: 0, customMaxHeight: 0, // 当前 hover 行 hoverRow: null, // 最后滚动位置 lastScrollLeft: 0, lastScrollTop: 0, // 单选框属性，已选中保留的行 radioReserveRow: null, // 复选框属性，已选中保留的行集合 checkboxReserveRowMap: {}, // 行数据，已展开保留的行集合 rowExpandedReserveRowMap: {}, // 树结构数据，已展开保留的行集合 treeExpandedReserveRowMap: {}, // 树结构数据，不确定状态的集合 treeIndeterminateRowMaps: {}, // 列表完整数据、条件处理后 tableFullData: [], afterFullData: [], afterTreeFullData: [], // 列表条件处理后数据集合 afterFullRowMaps: {}, // 树结构完整数据、条件处理后 tableFullTreeData: [], tableSynchData: [], tableSourceData: [], // 收集的列配置（带分组） collectColumn: [], // 完整所有列（不带分组） tableFullColumn: [], // 渲染所有列 visibleColumn: [], // 总的缓存数据集 fullAllDataRowIdData: {}, // 渲染中缓存数据 sourceDataRowIdData: {}, fullDataRowIdData: {}, fullColumnIdData: {}, fullColumnFieldData: {}, // 列选取状态 columnStatusMaps: {}, // 行选取状态 rowStatusMaps: {}, // prevDragRow: null, inited: false, tooltipTimeout: null, initStatus: false, isActivated: false } let tableMethods = {} as TableMethods let tablePrivateMethods = {} as TablePrivateMethods const refElem = ref() as Ref<HTMLDivElement> const refTooltip = ref() as Ref<VxeTooltipInstance> const refCommTooltip = ref() as Ref<VxeTooltipInstance> const refValidTooltip = ref() as Ref<VxeTooltipInstance> const refTableMenu = ref() as Ref<any> const refTableFilter = ref() as Ref<ComponentPublicInstance> const refTableCustom = ref() as Ref<ComponentPublicInstance> const refTableViewportElem = ref<HTMLDivElement>() const refTableHeader = ref() as Ref<ComponentPublicInstance> const refTableBodyPrepend = ref() as Ref<HTMLDivElement> const refTableBody = ref() as Ref<ComponentPublicInstance> const refTableFooter = ref() as Ref<ComponentPublicInstance> const refTableBodyAppend = ref() as Ref<HTMLDivElement> const refTableLeftHeader = ref() as Ref<ComponentPublicInstance> const refTableLeftBody = ref() as Ref<ComponentPublicInstance> const refTableLeftFooter = ref() as Ref<ComponentPublicInstance> const refTableRightHeader = ref() as Ref<ComponentPublicInstance> const refTableRightBody = ref() as Ref<ComponentPublicInstance> const refTableRightFooter = ref() as Ref<ComponentPublicInstance> const refLeftContainer = ref() as Ref<HTMLDivElement> const refRightContainer = ref() as Ref<HTMLDivElement> const refCellResizeBar = ref() as Ref<HTMLDivElement> const refCellResizeTip = ref() as Ref<HTMLDivElement> const refEmptyPlaceholder = ref() as Ref<HTMLDivElement> const refDragTipElem = ref<HTMLDivElement>() const refDragRowLineElem = ref<HTMLDivElement>() const refDragColLineElem = ref<HTMLDivElement>() const refScrollXVirtualElem = ref<HTMLDivElement>() const refScrollYVirtualElem = ref<HTMLDivElement>() const refScrollXHandleElem = ref<HTMLDivElement>() const refScrollXRightCornerElem = ref<HTMLDivElement>() const refScrollYHandleElem = ref<HTMLDivElement>() const refScrollYTopCornerElem = ref<HTMLDivElement>() const refScrollYBottomCornerElem = ref<HTMLDivElement>() const refScrollXSpaceElem = ref<HTMLDivElement>() const refScrollYSpaceElem = ref<HTMLDivElement>() const $xeGrid = inject<(VxeGridConstructor & VxeGridPrivateMethods) | null>('$xeGrid', null) let $xeToolbar: VxeToolbarConstructor const computeShowSettingColumn = computed(() => Boolean(slots.settingColumn)) const computeTableId = computed(() => { const { id } = props if (id) { if (XEUtils.isFunction(id)) { return `${id({ $table: $xeTable, $grid: $xeGrid }) || ''}` } return `${id}` } return '' }) const computeValidOpts = computed(() => { return Object.assign({}, getConfig().table.validConfig, props.validConfig) as VxeTablePropTypes.ValidOpts }) /** * @deprecated */ const computeSXOpts = computed(() => { const virtualXOpts = computeVirtualXOpts.value return virtualXOpts as VxeTablePropTypes.SXOpts }) const computeScrollXThreshold = computed(() => { const sXOpts = computeSXOpts.value const { threshold } = sXOpts if (threshold) { return XEUtils.toNumber(threshold) } return 0 }) /** * @deprecated */ const computeSYOpts = computed(() => { const virtualYOpts = computeVirtualYOpts.value return virtualYOpts as VxeTablePropTypes.SYOpts }) const computeVirtualXOpts = computed(() => { return Object.assign({}, getConfig().table.scrollX, getConfig().table.virtualXConfig, props.scrollX, props.virtualXConfig) }) const computeVirtualYOpts = computed(() => { return Object.assign({}, getConfig().table.scrollY, getConfig().table.virtualYConfig, props.scrollY, props.virtualYConfig) }) const computeScrollbarOpts = computed(() => { return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig) }) const computeScrollYThreshold = computed(() => { const sYOpts = computeSYOpts.value const { threshold } = sYOpts if (threshold) { return XEUtils.toNumber(threshold) } return 0 }) const computeRowHeightMaps = computed(() => { return { default: 48, medium: 44, small: 40, mini: 36 } }) const computeDefaultRowHeight = computed(() => { const vSize = computeSize.value const rowHeightMaps = computeRowHeightMaps.value return rowHeightMaps[vSize || 'default'] }) const computeColumnOpts = computed(() => { return Object.assign({}, getConfig().table.columnConfig, props.columnConfig) as VxeTablePropTypes.ColumnOpts }) const computeCellOpts = computed(() => { return Object.assign({}, getConfig().table.cellConfig, props.cellConfig) as VxeTablePropTypes.CellConfig }) const computeRowOpts = computed(() => { return Object.assign({}, getConfig().table.rowConfig, props.rowConfig) as VxeTablePropTypes.RowOpts }) const computeRowDragOpts = computed(() => { return Object.assign({}, getConfig().table.rowDragConfig, props.rowDragConfig) }) const computeColumnDragOpts = computed(() => { return Object.assign({}, getConfig().table.columnDragConfig, props.columnDragConfig) }) const computeResizeOpts = computed(() => { return Object.assign({}, getConfig().table.resizeConfig, props.resizeConfig) as VxeTablePropTypes.ResizeOpts }) const computeResizableOpts = computed(() => { return Object.assign({}, getConfig().table.resizableConfig, props.resizableConfig) as VxeTablePropTypes.ResizableOpts }) const computeSeqOpts = computed(() => { return Object.assign({ startIndex: 0 }, getConfig().table.seqConfig, props.seqConfig) as VxeTablePropTypes.SeqOpts }) const computeRadioOpts = computed(() => { return Object.assign({}, getConfig().table.radioConfig, props.radioConfig) as VxeTablePropTypes.RadioOpts }) const computeCheckboxOpts = computed(() => { return Object.assign({}, getConfig().table.checkboxConfig, props.checkboxConfig) as VxeTablePropTypes.CheckboxOpts }) const computeTooltipOpts = computed(() => { return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig) }) const computeEditOpts = computed(() => { return Object.assign({}, getConfig().table.editConfig, props.editConfig) as VxeTablePropTypes.EditOpts }) const computeSortOpts = computed(() => { return Object.assign({ orders: ['asc', 'desc', null] }, getConfig().table.sortConfig, props.sortConfig) as VxeTablePropTypes.SortOpts }) const computeFilterOpts = computed(() => { return Object.assign({}, getConfig().table.filterConfig, props.filterConfig) as VxeTablePropTypes.FilterOpts }) const computeMouseOpts = computed(() => { return Object.assign({}, getConfig().table.mouseConfig, props.mouseConfig) as VxeTablePropTypes.MouseOpts }) const computeAreaOpts = computed(() => { return Object.assign({}, getConfig().table.areaConfig, props.areaConfig) as VxeTablePropTypes.AreaOpts }) const computeKeyboardOpts = computed(() => { return Object.assign({}, getConfig().table.keyboardConfig, props.keyboardConfig) as VxeTablePropTypes.KeyboardOpts }) const computeClipOpts = computed(() => { return Object.assign({}, getConfig().table.clipConfig, props.clipConfig) }) const computeFNROpts = computed(() => { return Object.assign({}, getConfig().table.fnrConfig, props.fnrConfig) as VxeTablePropTypes.FNROpts }) const computeMenuOpts = computed(() => { return Object.assign({}, getConfig().table.menuConfig, props.menuConfig) as VxeTablePropTypes.MenuOpts }) const computeLeftFixedWidth = computed(() => { const { columnStore } = reactData const { leftList } = columnStore let leftWidth = 0 for (let i = 0; i < leftList.length; i++) { const column = leftList[i] leftWidth += column.renderWidth } return leftWidth }) const computeRightFixedWidth = computed(() => { const { columnStore } = reactData const { rightList } = columnStore let leftWidth = 0 for (let i = 0; i < rightList.length; i++) { const column = rightList[i] leftWidth += column.renderWidth } return leftWidth }) const computeHeaderMenu = computed(() => { const menuOpts = computeMenuOpts.value const headerOpts = menuOpts.header return headerOpts && headerOpts.options ? headerOpts.options : [] }) const computeBodyMenu = computed(() => { const menuOpts = computeMenuOpts.value const bodyOpts = menuOpts.body return bodyOpts && bodyOpts.options ? bodyOpts.options : [] }) const computeFooterMenu = computed(() => { const menuOpts = computeMenuOpts.value const footerOpts = menuOpts.footer return footerOpts && footerOpts.options ? footerOpts.options : [] }) const computeIsMenu = computed(() => { const menuOpts = computeMenuOpts.value const headerMenu = computeHeaderMenu.value const bodyMenu = computeBodyMenu.value const footerMenu = computeFooterMenu.value return !!(props.menuConfig && isEnableConf(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length)) }) const computeMenuList = computed(() => { const { ctxMenuStore } = reactData const rest: any[] = [] ctxMenuStore.list.forEach((list) => { list.forEach((item) => { rest.push(item) }) }) return rest }) const computeExportOpts = computed(() => { return Object.assign({}, getConfig().table.exportConfig, props.exportConfig) as VxeTablePropTypes.ExportOpts }) const computeImportOpts = computed(() => { return Object.assign({}, getConfig().table.importConfig, props.importConfig) as VxeTablePropTypes.ImportOpts }) const computePrintOpts = computed(() => { return Object.assign({}, getConfig().table.printConfig, props.printConfig) as VxeTablePropTypes.PrintOpts }) const computeExpandOpts = computed(() => { return Object.assign({}, getConfig().table.expandConfig, props.expandConfig) as VxeTablePropTypes.ExpandOpts }) const computeTreeOpts = computed(() => { return Object.assign({}, getConfig().table.treeConfig, props.treeConfig) as VxeTablePropTypes.TreeOpts }) const computeEmptyOpts = computed(() => { return Object.assign({}, getConfig().table.emptyRender, props.emptyRender) as VxeTablePropTypes.EmptyOpts }) const computeLoadingOpts = computed(() => { return Object.assign({}, getConfig().table.loadingConfig, props.loadingConfig) as VxeTablePropTypes.LoadingOpts }) const computeCellOffsetWidth = computed(() => { return props.border ? Math.max(2, Math.ceil(reactData.scrollbarWidth / reactData.tableColumn.length)) : 1 }) const computeCustomOpts = computed(() => { return Object.assign({}, getConfig().table.customConfig, props.customConfig) }) const computeAutoWidthColumnList = computed(() => { const { visibleColumn } = internalData const { tableColumn } = reactData return tableColumn.length || visibleColumn.length ? visibleColumn.filter(column => column.width === 'auto' || column.minWidth === 'auto') : [] }) const computeFixedColumnSize = computed(() => { const { tableColumn } = reactData const { collectColumn } = internalData let fixedSize = 0 // 只判断第一层 if (tableColumn.length && collectColumn.length) { collectColumn.forEach((column) => { if (column.renderFixed) { fixedSize++ } }) } return fixedSize }) const computeIsMaxFixedColumn = computed(() => { const fixedColumnSize = computeFixedColumnSize.value const columnOpts = computeColumnOpts.value const { maxFixedSize } = columnOpts if (maxFixedSize) { return fixedColumnSize >= maxFixedSize } return false }) const computeTableBorder = computed(() => { const { border } = props if (border === true) { return 'full' } if (border) { return border } return 'default' }) const computeIsAllCheckboxDisabled = computed(() => { const { treeConfig } = props const { tableData } = reactData const { tableFullData } = internalData const checkboxOpts = computeCheckboxOpts.value const { strict, checkMethod } = checkboxOpts if (strict) { if (tableData.length || tableFullData.length) { if (checkMethod) { if (treeConfig) { // 暂时不支持树形结构 } // 如果所有行都被禁用 return tableFullData.every((row) => !checkMethod({ row })) } return false } return true } return false }) const computeVirtualScrollBars = computed(() => { const { overflowX, scrollXLoad, overflowY, scrollYLoad } = reactData return { x: overflowX && scrollXLoad, y: overflowY && scrollYLoad } }) const refMaps: VxeTablePrivateRef = { refElem, refTooltip, refValidTooltip, refTableFilter, refTableCustom, refTableMenu, refTableHeader, refTableBody, refTableFooter, refTableLeftHeader, refTableLeftBody, refTableLeftFooter, refTableRightHeader, refTableRightBody, refTableRightFooter, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip, refScrollXVirtualElem, refScrollYVirtualElem, refScrollXHandleElem, refScrollYHandleElem, refScrollXSpaceElem, refScrollYSpaceElem } const computeMaps: VxeTablePrivateComputed = { computeSize, computeTableId, computeValidOpts, computeVirtualXOpts, computeVirtualYOpts, computeScrollbarOpts, computeColumnOpts, computeScrollXThreshold, computeScrollYThreshold, computeDefaultRowHeight, computeCellOpts, computeRowOpts, computeRowDragOpts, computeColumnDragOpts, computeResizeOpts, computeResizableOpts, computeSeqOpts, computeRadioOpts, computeCheckboxOpts, computeTooltipOpts, computeEditOpts, computeSortOpts, computeFilterOpts, computeMouseOpts, computeAreaOpts, computeKeyboardOpts, computeClipOpts, computeFNROpts, computeHeaderMenu, computeBodyMenu, computeFooterMenu, computeIsMenu, computeMenuOpts, computeExportOpts, computeImportOpts, computePrintOpts, computeExpandOpts, computeTreeOpts, computeEmptyOpts, computeLoadingOpts, computeCellOffsetWidth, computeCustomOpts, computeLeftFixedWidth, computeRightFixedWidth, computeFixedColumnSize, computeIsMaxFixedColumn, computeIsAllCheckboxDisabled, computeVirtualScrollBars, computeSXOpts, computeSYOpts } const $xeTable = { xID, props: props as VxeTableProps, context, reactData, internalData, getRefMaps: () => refMaps, getComputeMaps: () => computeMaps, xegrid: $xeGrid } as unknown as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods const eqCellValue = (row1: any, row2: any, field: string) => { const val1 = XEUtils.get(row1, field) const val2 = XEUtils.get(row2, field) if (eqEmptyValue(val1) && eqEmptyValue(val2)) { return true } if (XEUtils.isString(val1) || XEUtils.isNumber(val1)) { return ('' + val1) === ('' + val2) } return XEUtils.isEqual(val1, val2) } const getNextSortOrder = (column: VxeTableDefines.ColumnInfo) => { const sortOpts = computeSortOpts.value const { orders } = sortOpts const currOrder = column.order || null const oIndex = orders.indexOf(currOrder) + 1 return orders[oIndex < orders.length ? oIndex : 0] } const getCustomStorageMap = (id?: string) => { const version = getConfig().version const rest = XEUtils.toStringJSON(localStorage.getItem(customStorageKey) || '') const maps = rest && rest._v === version ? rest : { _v: version } return (id ? maps[id] : maps) || {} } const setCustomStorageMap = (id: string, data: any) => { const version = getConfig().version const maps = getCustomStorageMap() maps[id] = data || undefined maps._v = version localStorage.setItem(customStorageKey, XEUtils.toJSONString(maps)) } const getRecoverRowMaps = (keyMaps: Record<string, any>) => { const { fullAllDataRowIdData } = internalData const restKeys: Record<string, any> = {} XEUtils.each(keyMaps, (row, rowid) => { if (fullAllDataRowIdData[rowid]) { restKeys[rowid] = row } }) return restKeys } const handleReserveRow = (reserveRowMap: any) => { const { fullDataRowIdData } = internalData const reserveList: any[] = [] XEUtils.each(reserveRowMap, (item, rowid) => { if (fullDataRowIdData[rowid] && $xeTable.findRowIndexOf(reserveList, fullDataRowIdData[rowid].row) === -1) { reserveList.push(fullDataRowIdData[rowid].row) } }) return reserveList } const handleVirtualXVisible = () => { const { elemStore, visibleColumn } = internalData const leftFixedWidth = computeLeftFixedWidth.value const rightFixedWidth = computeRightFixedWidth.value const bodyScrollElem = getRefElem(elemStore['main-body-scroll']) if (bodyScrollElem) { const { scrollLeft, clientWidth } = bodyScrollElem const startWidth = scrollLeft + leftFixedWidth const endWidth = scrollLeft + clientWidth - rightFixedWidth let toVisibleIndex = -1 let cWidth = 0 let visibleSize = 0 for (let colIndex = 0, colLen = visibleColumn.length; colIndex < colLen; colIndex++) { cWidth += visibleColumn[colIndex].renderWidth if (toVisibleIndex === -1 && startWidth < cWidth) { toVisibleIndex = colIndex } if (toVisibleIndex >= 0) { visibleSize++ if (cWidth > endWidth) { break } } } return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(1, visibleSize) } } return { toVisibleIndex: 0, visibleSize: 6 } } const computeRowHeight = () => { const tableHeader = refTableHeader.value const tableBody = refTableBody.value const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null const defaultRowHeight = computeDefaultRowHeight.value let rowHeight = 0 if (tableBodyElem) { const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null let firstTrElem firstTrElem = tableBodyElem.querySelector('tr') if (!firstTrElem && tableHeaderElem) { firstTrElem = tableHeaderElem.querySelector('tr') } if (firstTrElem) { rowHeight = firstTrElem.clientHeight } } if (!rowHeight) { rowHeight = defaultRowHeight } // 最低支持 18px 行高 return Math.max(18, rowHeight) } const handleVirtualYVisible = () => { const { showOverflow } = props const { rowHeight } = reactData const { elemStore, afterFullData, fullAllDataRowIdData } = internalData const bodyScrollElem = getRefElem(elemStore['main-body-scroll']) if (bodyScrollElem) { const { scrollTop, clientHeight } = bodyScrollElem const endHeight = scrollTop + clientHeight let toVisibleIndex = -1 let offsetTop = 0 let visibleSize = 0 if (showOverflow) { toVisibleIndex = Math.floor(scrollTop / rowHeight) visibleSize = Math.ceil(clientHeight / rowHeight) + 1 } else { for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) { const row = afterFullData[rIndex] const rowid = getRowid($xeTable, row) const rowRest = fullAllDataRowIdData[rowid] offsetTop += rowRest ? (rowRest.height || rowHeight) : rowHeight if (toVisibleIndex === -1 && scrollTop < offsetTop) { toVisibleIndex = rIndex } if (toVisibleIndex >= 0) { visibleSize++ if (offsetTop > endHeight) { break } } } } return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) } } return { toVisibleIndex: 0, visibleSize: 6 } } const calculateMergerOffsetIndex = (list: any[], offsetItem: any, type: 'row' | 'col') => { for (let mcIndex = 0, len = list.length; mcIndex < len; mcIndex++) { const mergeItem = list[mcIndex] const { startIndex, endIndex } = offsetItem const mergeStartIndex = mergeItem[type] const mergeSpanNumber = mergeItem[type + 'span'] const mergeEndIndex = mergeStartIndex + mergeSpanNumber if (mergeStartIndex < startIndex && startIndex < mergeEndIndex) { offsetItem.startIndex = mergeStartIndex } if (mergeStartIndex < endIndex && endIndex < mergeEndIndex) { offsetItem.endIndex = mergeEndIndex } if (offsetItem.startIndex !== startIndex || offsetItem.endIndex !== endIndex) { mcIndex = -1 } } } const setMerges = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[], mList: VxeTableDefines.MergeItem[], rowList?: any[]) => { if (merges) { const { treeConfig } = props const { visibleColumn } = internalData if (!XEUtils.isArray(merges)) { merges = [merges] } if (treeConfig && merges.length) { errLog('vxe.error.noTree', ['merge-cells | merge-footer-items']) } merges.forEach((item) => { let { row, col, rowspan, colspan } = item if (rowList && XEUtils.isNumber(row)) { row = rowList[row] } if (XEUtils.isNumber(col)) { col = visibleColumn[col] } if ((rowList ? row : XEUtils.isNumber(row)) && col && (rowspan || colspan)) { rowspan = XEUtils.toNumber(rowspan) || 1 colspan = XEUtils.toNumber(colspan) || 1 if (rowspan > 1 || colspan > 1) { const mcIndex = XEUtils.findIndexOf(mList, item => (item._row === row || getRowid($xeTable, item._row) === getRowid($xeTable, row)) && ((item as any)._col.id === col || item._col.id === (col as VxeTableDefines.ColumnInfo).id)) const mergeItem = mList[mcIndex] if (mergeItem) { mergeItem.rowspan = rowspan mergeItem.colspan = colspan mergeItem._rowspan = rowspan mergeItem._colspan = colspan } else { const mergeRowIndex = rowList ? $xeTable.findRowIndexOf(rowList, row) : row const mergeColIndex = tableMethods.getVTColumnIndex(col) mList.push({ row: mergeRowIndex, col: mergeColIndex, rowspan, colspan, _row: row, _col: col, _rowspan: rowspan, _colspan: colspan }) } } } }) } } const removeMerges = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[], mList: VxeTableDefines.MergeItem[], rowList?: any) => { const rest: VxeTableDefines.MergeItem[] = [] if (merges) { const { treeConfig } = props const { visibleColumn } = internalData if (!XEUtils.isArray(merges)) { merges = [merges] } if (treeConfig && merges.length) { errLog('vxe.error.noTree', ['merge-cells | merge-footer-items']) } merges.forEach((item) => { let { row, col } = item if (rowList && XEUtils.isNumber(row)) { row = rowList[row] } if (XEUtils.isNumber(col)) { col = visibleColumn[col] } const mcIndex = XEUtils.findIndexOf(mList, item => (item._row === row || getRowid($xeTable, item._row) === getRowid($xeTable, row)) && ((item as any)._col.id === col || item._col.id === (col as VxeTableDefines.ColumnInfo).id)) if (mcIndex > -1) { const rItems = mList.splice(mcIndex, 1) rest.push(rItems[0]) } }) } return rest } const clearAllSort = () => { const { tableFullColumn } = internalData tableFullColumn.forEach((column) => { column.order = null }) } const calcTableHeight = (key: 'height' | 'minHeight' | 'maxHeight') => { const { parentHeight } = reactData const val = props[key] let num = 0 if (val) { if (val === '100%' || val === 'auto') { num = parentHeight } else { const excludeHeight = $xeTable.getExcludeHeight() if (isScale(val)) { num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight) } else { num = XEUtils.toNumber(val) } num = Math.max(40, num - excludeHeight) } } return num } const handleCustomRestore = (storeData: VxeTableDefines.CustomStoreData) => { let { collectColumn } = internalData const { resizableData, sortData, visibleData, fixedData } = storeData let hasCustomSort = false // 处理还原 if (resizableData || sortData || visibleData || fixedData) { XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => { const colKey = column.getKey() // 支持一级 if (!parentColumn) { if (fixedData && fixedData[colKey] !== undefined) { column.fixed = fixedData[colKey] } if (sortData && XEUtils.isNumber(sortData[colKey])) { hasCustomSort = true column.renderSortNumber = sortData[colKey] } } if (resizableData && XEUtils.isNumber(resizableData[colKey])) { column.resizeWidth = resizableData[colKey] } if (visibleData && XEUtils.isBoolean(visibleData[colKey])) { column.visible = visibleData[colKey] } }) // 如果自定义了顺序 if (hasCustomSort) { collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber') internalData.collectColumn = collectColumn internalData.tableFullColumn = getColumnList(collectColumn) } reactData.isCustomStatus = true } else { reactData.isCustomStatus = false } } /** * 还原自定义列操作状态 */ const restoreCustomStorage = () => { const { customConfig } = props const tableId = computeTableId.value const customOpts = computeCustomOpts.value const { storage, restoreStore } = customOpts const isAllCustom = storage === true const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {}) const isCustomResizable = isAllCustom || storageOpts.resizable const isCustomVisible = isAllCustom || storageOpts.visible const isCustomFixed = isAllCustom || storageOpts.fixed const isCustomSort = isAllCustom || storageOpts.sort if ((customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) { if (!tableId) { errLog('vxe.error.reqProp', ['id']) return } const storeData: VxeTableDefines.CustomStoreData = getCustomStorageMap(tableId) if (restoreStore) { return Promise.resolve( restoreStore({ id: tableId, type: 'restore', storeData }) ).then(storeData => { if (!storeData) { return } return handleCustomRestore(storeData) }).catch(e => e) } else { return handleCustomRestore(storeData) } } } /** * 更新数据列的 Map * 牺牲数据组装的耗时，用来换取使用过程中的流畅 */ const cacheColumnMap = () => { const { tableFullColumn, collectColumn } = internalData const fullColumnIdData: Record<string, VxeTableDefines.ColumnCacheItem> = internalData.fullColumnIdData = {} const fullColumnFieldData: Record<string, VxeTableDefines.ColumnCacheItem> = internalData.fullColumnFieldData = {} const mouseOpts = computeMouseOpts.value const columnOpts = computeColumnOpts.value const columnDragOpts = computeColumnDragOpts.value const { isCrossDrag, isSelfToChildDrag } = columnDragOpts const customOpts = computeCustomOpts.value const { storage } = customOpts const rowOpts = computeRowOpts.value const isGroup = collectColumn.some(hasChildrenList) let isAllOverflow = !!props.showOverflow let expandColumn: VxeTableDefines.ColumnInfo | undefined let treeNodeColumn: VxeTableDefines.ColumnInfo | undefined let checkboxColumn: VxeTableDefines.ColumnInfo | undefined let radioColumn: VxeTableDefines.ColumnInfo | undefined let htmlColumn: VxeTableDefines.ColumnInfo | undefined let hasFixed: VxeColumnPropTypes.Fixed | undefined const handleFunc = (column: VxeTableDefines.ColumnInfo, index: number, items: VxeTableDefines.ColumnInfo[], path?: string[], parentColumn?: VxeTableDefines.ColumnInfo) => { const { id: colid, field, fixed, type, treeNode } = column const rest = { $index: -1, _index: -1, column, colid, index, items, parent: parentColumn || null, width: 0 } if (field) { if (fullColumnFieldData[field]) { errLog('vxe.error.colRepet', ['field', field]) } fullColumnFieldData[field] = rest } else { if ((storage && !type) || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) { errLog('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field`]) } } if (!hasFixed && fixed) { hasFixed = fixed } if (!htmlColumn && type === 'html') { htmlColumn = column } if (treeNode) { if (process.env.VUE_APP_VXE_ENV === 'development') { if (treeNodeColumn) { warnLog('vxe.error.colRepet', ['tree-node', treeNode]) } } if (!treeNodeColumn) { treeNodeColumn = column } } else if (type === 'expand') { if (process.env.VUE_APP_VXE_ENV === 'development') { if (expandColumn) { warnLog('vxe.error.colRepet', ['type', type]) } } if (!expandColumn) { expandColumn = column } } if (process.env.VUE_APP_VXE_ENV === 'development') { if (type === 'checkbox') { if (checkboxColumn) { warnLog('vxe.error.colRepet', ['type', type]) } if (!checkboxColumn) { checkboxColumn = column } } else if (type === 'radio') { if (radioColumn) { warnLog('vxe.error.colRepet', ['type', type]) } if (!radioColumn) { radioColumn = column } } } if (isAllOverflow && column.showOverflow === false) { isAllOverflow = false } if (fullColumnIdData[colid]) { errLog('vxe.error.colRepet', ['colId', colid]) } fullColumnIdData[colid] = rest } if (isGroup) { XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn, nodes) => { column.level = nodes.length handleFunc(column, index, items, path, parentColumn) }) } else { tableFullColumn.forEach(handleFunc) } if (process.env.VUE_APP_VXE_ENV === 'development') { if (expandColumn && mouseOpts.area) { errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand']) } } if (process.env.VUE_APP_VXE_ENV === 'development') { if (htmlColumn) { if (!columnOpts.useKey) { errLog('vxe.error.reqProp', ['column-config.useKey & column.type=html']) } if (!rowOpts.useKey) { errLog('vxe.error.reqProp', ['row-config.useKey & column.type=html']) } } } reactData.isGroup = isGroup reactData.treeNodeColumn = treeNodeColumn reactData.expandColumn = expandColumn reactData.isAllOverflow = isAllOverflow } const updateHeight = () => { internalData.customHeight = calcTableHeight('height') internalData.customMinHeight = calcTableHeight('minHeight') internalData.customMaxHeight = calcTableHeight('maxHeight') } const calcColumnAutoWidth = (column: VxeTableDefines.ColumnInfo, wrapperEl: HTMLDivElement) => { const cellElList = wrapperEl.querySelectorAll(`.vxe-header--column.${column.id}>.vxe-cell,.vxe-body--column.${column.id}>.vxe-cell,.vxe-footer--column.${column.id}>.vxe-cell`) const firstCellEl = cellElList[0] let paddingSize = 0 if (firstCellEl) { const cellStyle = getComputedStyle(firstCellEl) paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2 } let colWidth = column.renderAutoWidth - paddingSize XEUtils.arrayEach(cellElList, (itemEl) => { const cellEl = itemEl as HTMLElement const thElem = cellEl.parentElement as HTMLElement let titleWidth = 0 if (`${thElem.tagName}`.toLowerCase() === 'th') { XEUtils.arrayEach(cellEl.children, (btnEl) => { titleWidth += (btnEl as HTMLElement).offsetWidth + 1 }) } else { const labelEl = cellEl.firstElementChild as HTMLElement if (labelEl) { titleWidth = labelEl.offsetWidth } } if (titleWidth) { colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4) } }) return colWidth + paddingSize } const calcCellWidth = () => { const autoWidthColumnList = computeAutoWidthColumnList.value reactData.isCalcColumn = true return nextTick().then(() => { const { fullColumnIdData } = internalData const el = refElem.value if (el) { autoWidthColumnList.forEach(column => { const colid = column.id const colRest = fullColumnIdData[colid] const colWidth = calcColumnAutoWidth(column, el) if (colRest) { colRest.width = Math.max(colWidth, colRest.width) } column.renderAutoWidth = colWidth }) $xeTable.analyColumnWidth() } reactData.isCalcColumn = false }) } /** * 列宽算法，计算单元格列宽，动态分配可用剩余空间 * 支持 px、%、固定混合分配 * 支持动态列表调整分配 * 支持自动分配偏移量 * 支持 width=60 width=60px width=10% min-width=60 min-width=60px min-width=10% */ const autoCellWidth = () => { const { elemStore } = internalData const scrollbarOpts = computeScrollbarOpts.value const tableBody = refTableBody.value const tableAppendElem = refTableBodyAppend.value const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null if (!bodyElem) { return } const yHandleEl = refScrollYHandleElem.value if (!yHandleEl) { return } const xHandleEl = refScrollXHandleElem.value if (!xHandleEl) { return } let tableWidth = 0 const minCellWidth = 40 // 列宽最少限制 40px const bodyWidth = bodyElem.clientWidth let remainWidth = bodyWidth let meanWidth = remainWidth / 100 const { fit } = props const { columnStore } = reactData const { resizeList, pxMinList, autoMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore // 最小宽 pxMinList.forEach((column) => { const minWidth = XEUtils.toInteger(column.minWidth) tableWidth += minWidth column.renderWidth = minWidth }) // 最小自适应 autoMinList.forEach((column) => { const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth)) tableWidth += scaleWidth column.renderWidth = scaleWidth }) // 最小百分比 scaleMinList.forEach((column) => { const scaleWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth) tableWidth += scaleWidth column.renderWidth = scaleWidth }) // 固定百分比 scaleList.forEach((column) => { const scaleWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth) tableWidth += scaleWidth column.renderWidth = scaleWidth }) // 固定宽 pxList.forEach((column) => { const width = XEUtils.toInteger(column.width) tableWidth += width column.renderWidth = width }) // 自适应宽 autoList.forEach((column) => { const width = Math.max(60, XEUtils.toInteger(column.renderAutoWidth)) tableWidth += width column.renderWidth = width }) // 调整了列宽 resizeList.forEach((column) => { const width = XEUtils.toInteger(column.resizeWidth) tableWidth += width column.renderWidth = width }) // 有右上角设置列需要加上宽度 if (computeShowSettingColumn.value) { tableWidth += settingColumnWidth } remainWidth -= tableWidth meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0 if (fit) { if (remainWidth > 0) { scaleMinList.concat(pxMinList).concat(autoMinList).forEach((column) => { tableWidth += meanWidth column.renderWidth += meanWidth }) } } else { meanWidth = minCellWidth } // 剩余均分 remainList.forEach((column) => { const width = Math.max(meanWidth, minCellWidth) column.renderWidth = width tableWidth += width }) if (fit) { /** * 偏移量算法 * 如果所有列足够放的情况下，从最后动态列开始分配 */ const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList) let dynamicSize = dynamicList.length - 1 if (dynamicSize > 0) { let i = bodyWidth - tableWidth if (i > 0) { while (i > 0 && dynamicSize >= 0) { i-- dynamicList[dynamicSize--].renderWidth++ } tableWidth = bodyWidth } } } const tableHeight = bodyElem.offsetHeight const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight reactData.scrollbarWidth = overflowY ? Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth) : 0 reactData.overflowY = overflowY internalData.tableWidth = tableWidth internalData.tableHeight = tableHeight const headerTableElem = getRefElem(elemStore['main-header-table']) const footerTableElem = getRefElem(elemStore['main-footer-table']) const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0 const overflowX = tableWidth > bodyWidth let footerHeight = footerTableElem ? footerTableElem.clientHeight : 0 if (tableAppendElem) { footerHeight += tableAppendE