lxm_front/vxe-table
1
0
Fork 0
mirror of synced 2025-12-09 15:24:36 +08:00
Code Issues Projects Releases Wiki Activity

修复自定义列设置缓存排序状态无效问题

Browse Source
This commit is contained in:
xuliangzhan
2024-05-08 08:13:44 +08:00
parent 37940d9b27
commit c42c39414a
5 changed files with 82 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "vxe-table",
"version": "4.6.9",
"version": "4.6.10-beta.2",
"description": "一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...",
"scripts": {
"update": "npm install --legacy-peer-deps",

14
packages/custom/src/panel.ts
View File

@@ -50,6 +50,7 @@ export default defineComponent({
}
const confirmCustomEvent = (evnt: Event) => {
updateColumnSort()
$xetable.closeCustom()
$xetable.emitCustomEvent('confirm', evnt)
}
@@ -173,6 +174,15 @@ export default defineComponent({
}
}
const updateColumnSort = () => {
const { customColumnList } = reactData
// 更新顺序
customColumnList.forEach((column, index) => {
const sortIndex = index + 1
column.renderSortNumber = sortIndex
})
}
const sortDragendEvent = (evnt: DragEvent) => {
const { customColumnList } = reactData
const trEl = evnt.currentTarget as HTMLElement
@@ -211,9 +221,7 @@ export default defineComponent({
removeClass(trEl, 'active--drag-target')
removeClass(trEl, 'active--drag-origin')
// 更新顺序
customColumnList.forEach((column, index) => {
column.renderSortNumber = index
})
updateColumnSort()
}
const sortDragoverEvent = (evnt: DragEvent) => {

84
packages/table/src/table.ts
View File

@@ -890,7 +890,6 @@ export default defineComponent({
*/
const restoreCustomStorage = () => {
const { id, customConfig } = props
const { collectColumn } = internalData
const customOpts = computeCustomOpts.value
const { storage } = customOpts
const isAllCustom = storage === true
@@ -906,7 +905,7 @@ export default defineComponent({
resizeWidth?: number
visible?: boolean
fixed?: string
sortNumber?: number
renderSortNumber?: number
}
} = {}
if (!id) {
@@ -938,16 +937,18 @@ export default defineComponent({
}
}
// 自定义顺序
let hasCustomSort = false
if (isCustomSort) {
const columnSortStorage = getCustomStorageMap(sortStorageKey)[id]
if (columnSortStorage) {
const colOrderSeqs = columnSortStorage.split(',')
colOrderSeqs.forEach((orderConf: any) => {
const [colKey, sortNumber] = orderConf.split('|')
XEUtils.each(columnSortStorage, (renderSortNumber: number, colKey) => {
if (customMap[colKey]) {
customMap[colKey].sortNumber = sortNumber
customMap[colKey].renderSortNumber = renderSortNumber
} else {
customMap[colKey] = { sortNumber }
customMap[colKey] = { renderSortNumber }
}
if (!hasCustomSort) {
hasCustomSort = true
}
})
}
@@ -975,6 +976,7 @@ export default defineComponent({
})
}
}
let { collectColumn } = internalData
const keyMap: {
[key: string]: VxeTableDefines.ColumnInfo
} = {}
@@ -984,7 +986,7 @@ export default defineComponent({
keyMap[colKey] = column
}
})
XEUtils.each(customMap, ({ visible, resizeWidth, fixed, sortNumber }, colKey) => {
XEUtils.each(customMap, ({ visible, resizeWidth, fixed, renderSortNumber }, colKey) => {
const column = keyMap[colKey]
if (column) {
if (XEUtils.isNumber(resizeWidth)) {
@@ -996,11 +998,17 @@ export default defineComponent({
if (fixed) {
column.fixed = fixed
}
if (sortNumber) {
column.renderSortNumber = Number(sortNumber)
if (renderSortNumber) {
column.renderSortNumber = Number(renderSortNumber)
}
}
})
// 如果自定义了顺序
if (hasCustomSort) {
collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber')
internalData.collectColumn = collectColumn
internalData.tableFullColumn = getColumnList(collectColumn)
}
}
}
@@ -1008,7 +1016,7 @@ export default defineComponent({
* 更新数据列的 Map
* 牺牲数据组装的耗时，用来换取使用过程中的流畅
*/
const cacheColumnMap = (isInit?: boolean) => {
const cacheColumnMap = () => {
const { tableFullColumn, collectColumn } = internalData
const fullColumnIdData: any = internalData.fullColumnIdData = {}
const fullColumnFieldData: any = internalData.fullColumnFieldData = {}
@@ -1082,9 +1090,6 @@ export default defineComponent({
if (fullColumnIdData[colid]) {
errLog('vxe.error.colRepet', ['colId', colid])
}
if (isInit) {
column.sortNumber = index
}
fullColumnIdData[colid] = rest
}
if (isGroup) {
@@ -2539,12 +2544,22 @@ export default defineComponent({
})
}
const initColumnSort = () => {
const { collectColumn } = internalData
collectColumn.forEach((column, index) => {
const sortIndex = index + 1
column.sortNumber = sortIndex
column.renderSortNumber = sortIndex
})
}
const handleColumn = (collectColumn: VxeTableDefines.ColumnInfo[]) => {
internalData.collectColumn = collectColumn
const tableFullColumn = getColumnList(collectColumn)
internalData.tableFullColumn = tableFullColumn
cacheColumnMap(true)
initColumnSort()
restoreCustomStorage()
cacheColumnMap()
parseColumns().then(() => {
if (reactData.scrollXLoad) {
loadScrollXData()
@@ -3343,6 +3358,9 @@ export default defineComponent({
if (opts.resizable) {
tablePrivateMethods.saveCustomResizable(true)
}
if (opts.sort) {
tablePrivateMethods.saveCustomSort(true)
}
if (opts.fixed) {
tablePrivateMethods.saveCustomFixed()
}
@@ -5256,7 +5274,9 @@ export default defineComponent({
const customOpts = computeCustomOpts.value
const { collectColumn } = internalData
const { storage } = customOpts
const isResizable = storage === true || (storage && storage.resizable)
const isAllStorage = storage === true
const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {})
const isResizable = isAllStorage || storageOpts.resizable
if (customConfig && isResizable) {
const columnWidthStorageMap = getCustomStorageMap(resizableStorageKey)
let columnWidthStorage: any
@@ -5279,6 +5299,37 @@ export default defineComponent({
localStorage.setItem(resizableStorageKey, XEUtils.toJSONString(columnWidthStorageMap))
}
},
saveCustomSort (isReset?: boolean) {
const { id, customConfig } = props
const customOpts = computeCustomOpts.value
const { collectColumn } = internalData
const { storage } = customOpts
const isAllStorage = storage === true
const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {})
const isSort = isAllStorage || storageOpts.sort
if (customConfig && isSort) {
const columnSortStorageMap = getCustomStorageMap(sortStorageKey)
let columnWidthStorage: any
if (!id) {
errLog('vxe.error.reqProp', ['id'])
return
}
if (!isReset) {
columnWidthStorage = XEUtils.isPlainObject(columnSortStorageMap[id]) ? columnSortStorageMap[id] : {}
// 排序只支持一级
collectColumn.forEach((column) => {
if (column.sortNumber !== column.renderSortNumber) {
const colKey = column.getKey()
if (colKey) {
columnWidthStorage[colKey] = column.renderSortNumber
}
}
})
}
columnSortStorageMap[id] = XEUtils.isEmpty(columnWidthStorage) ? undefined : columnWidthStorage
localStorage.setItem(sortStorageKey, XEUtils.toJSONString(columnSortStorageMap))
}
},
saveCustomFixed () {
const { id, customConfig } = props
const { collectColumn } = internalData
@@ -5353,6 +5404,7 @@ export default defineComponent({
}
}
tablePrivateMethods.saveCustomVisible()
tablePrivateMethods.saveCustomSort()
tablePrivateMethods.analyColumnWidth()
return tableMethods.refreshColumn(true)
},

1
types/module/export.d.ts vendored
View File

@@ -103,6 +103,7 @@ declare module '../table' {
* 是否服务端导出
*/
remote?: boolean
encoding?: string
/**
* 只对 remote=true 有效，用于自定义导入逻辑
*/

1
types/table.d.ts vendored
View File

@@ -759,6 +759,7 @@ export interface TablePrivateMethods<D = VxeTableDataRow> {
cacheRowMap(isSource?: boolean): void
cacheSourceMap(fullData: any[]): void
saveCustomResizable(isReset?: boolean): void
saveCustomSort(isReset?: boolean): void
saveCustomVisible(): void
saveCustomFixed(): void
analyColumnWidth(): void