lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

fix 修复表尾固定列显示错误问题 #1851

Browse Source
This commit is contained in:
xuliangzhan
2022-09-10 22:36:36 +08:00
parent 20eb920419
commit 2fbfe8264b
14 changed files with 151 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/api/table.ts
View File

@@ -2806,7 +2806,7 @@ const apis = [
},
{
name: 'gt',
desc: '指定大于指定列时自动启动横向虚拟滚动，如果为 0 则总是启用，如果为 -1 则关闭（注：启用横向虚拟滚动之后将不能支持分组表头）',
desc: '指定大于指定列时自动启动横向虚拟滚动，如果为 0 则总是启用，如果为 -1 则关闭',
version: '',
type: 'number',
enum: '',

2
examples/views/icon/Icon.vue
View File

@@ -25,7 +25,7 @@ export default defineComponent({
setup () {
return {
prefixClass: 'vxe-icon-',
iconList: ['add', 'alipay', 'arrow-double-left', 'arrow-double-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'bell', 'bell-fill', 'calendar', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'chart-bar-x', 'chart-bar-y', 'chart-line', 'chart-pie', 'chart-radar', 'chat', 'chat-fill', 'check', 'checkbox-checked', 'checkbox-indeterminate', 'checkbox-unchecked', 'close', 'cloud-download', 'cloud-upload', 'comment', 'company', 'copy', 'custom-column', 'cut', 'delete', 'delete-fill', 'dot', 'download', 'edit', 'ellipsis-h', 'ellipsis-v', 'envelope', 'envelope-fill', 'envelope-open', 'envelope-open-fill', 'error-circle', 'error-circle-fill', 'exclamation', 'eye-fill', 'eye-fill-close', 'file-excel', 'file-image', 'file-markdown', 'file-pdf', 'file-ppt', 'file-txt', 'file-word', 'file-zip', 'fixed', 'fixed-fill', 'flow-branch', 'folder', 'folder-open', 'fullscreen', 'funnel', 'home', 'home-fill', 'indicator', 'info-circle', 'info-circle-fill', 'information', 'link', 'lock', 'lock-fill', 'maximize', 'menu', 'merge-cells', 'message-fill', 'minimize', 'minus', 'num-list', 'paste', 'picture', 'picture-fill', 'print', 'question', 'question-circle', 'question-circle-fill', 'radio-checked', 'radio-unchecked', 'refresh', 'repeat', 'save', 'search', 'search-zoom-in', 'send', 'send-fill', 'setting', 'setting-fill', 'sort', 'sort-alpha-asc', 'sort-alpha-desc', 'sort-numeric-asc', 'sort-numeric-desc', 'spinner', 'square', 'square-caret-right', 'square-caret-right-fill', 'square-checked', 'square-checked-fill', 'square-close', 'square-close-fill', 'square-down', 'square-down-fill', 'square-fill', 'square-left', 'square-left-fill', 'square-minus', 'square-minus-fill', 'square-plus', 'square-plus-fill', 'square-plus-square', 'square-right', 'square-right-fill', 'square-square', 'square-up', 'square-up-fill', 'star', 'star-fill', 'star-half', 'success-circle', 'success-circle-fill', 'swap', 'swap-left', 'swap-right', 'table', 'undo', 'unlock', 'unlock-fill', 'upload', 'user', 'user-fill', 'voice', 'voice-fill', 'warning-circle', 'warning-triangle', 'warning-triangle-fill', 'warnion-circle-fill', 'wechat', 'zoom-in', 'zoom-out'],
iconList: ['add', 'alipay', 'arrow-double-left', 'arrow-double-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'bell', 'bell-fill', 'calendar', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'chart-bar-x', 'chart-bar-y', 'chart-line', 'chart-pie', 'chart-radar', 'chat', 'chat-fill', 'check', 'checkbox-checked', 'checkbox-indeterminate', 'checkbox-unchecked', 'close', 'cloud-download', 'cloud-upload', 'cloudy', 'comment', 'company', 'copy', 'custom-column', 'cut', 'delete', 'delete-fill', 'dot', 'download', 'edit', 'ellipsis-h', 'ellipsis-v', 'envelope', 'envelope-fill', 'envelope-open', 'envelope-open-fill', 'error-circle', 'error-circle-fill', 'exclamation', 'eye-fill', 'eye-fill-close', 'file-excel', 'file-image', 'file-markdown', 'file-pdf', 'file-ppt', 'file-txt', 'file-word', 'file-zip', 'fixed', 'fixed-fill', 'flag', 'flag-fill', 'flow-branch', 'folder', 'folder-open', 'fullscreen', 'funnel', 'funnel-clear', 'goods', 'goods-fill', 'heavy-rain', 'home', 'home-fill', 'indicator', 'info-circle', 'info-circle-fill', 'information', 'lightning', 'link', 'location', 'location-fill', 'lock', 'lock-fill', 'maximize', 'menu', 'merge-cells', 'message-fill', 'microphone', 'microphone-fill', 'minimize', 'minus', 'moon', 'num-list', 'paste', 'picture', 'picture-fill', 'platform', 'print', 'question', 'question-circle', 'question-circle-fill', 'radio-checked', 'radio-unchecked', 'refresh', 'repeat', 'save', 'search', 'search-zoom-in', 'send', 'send-fill', 'setting', 'setting-fill', 'share', 'share-fill', 'sort', 'sort-alpha-asc', 'sort-alpha-desc', 'sort-numeric-asc', 'sort-numeric-desc', 'spinner', 'square', 'square-caret-right', 'square-caret-right-fill', 'square-checked', 'square-checked-fill', 'square-close', 'square-close-fill', 'square-down', 'square-down-fill', 'square-fill', 'square-left', 'square-left-fill', 'square-minus', 'square-minus-fill', 'square-plus', 'square-plus-fill', 'square-plus-square', 'square-right', 'square-right-fill', 'square-square', 'square-up', 'square-up-fill', 'star', 'star-fill', 'star-half', 'success-circle', 'success-circle-fill', 'sunny', 'swap', 'swap-left', 'swap-right', 'table', 'undo', 'unlock', 'unlock-fill', 'upload', 'user', 'user-fill', 'voice', 'voice-fill', 'warning-circle', 'warning-triangle', 'warning-triangle-fill', 'warnion-circle-fill', 'wechat', 'zoom-in', 'zoom-out'],
demoCodes: [
`
<i class="vxe-icon-delete"></i>

126
examples/views/table/scroll/Group.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<p class="tip">分组表头<br><span class="red">（注：分组表头不支持横向虚拟滚动，通过设置 scroll-x={enabled: false} 关闭即可）</span></p>
<p class="tip">分组表头</p>
<vxe-table
border
@@ -8,25 +8,55 @@
show-overflow
ref="xTable"
height="500"
:scroll-x="{enabled: false}"
:scroll-x="{gt: 0}"
:loading="demo1.loading">
<vxe-column type="seq" title="序号" width="100"></vxe-column>
<vxe-column field="name1" title="Name" width="200" sortable></vxe-column>
<vxe-column field="name2" title="Name" width="100" sortable></vxe-column>
<vxe-colgroup title="基本信息">
<vxe-column field="name" title="Name" width="200" sortable></vxe-column>
<vxe-column field="name" title="Name" width="100" sortable></vxe-column>
<vxe-column field="age" title="Age" width="200"></vxe-column>
<vxe-column field="sex" title="Sex" width="200"></vxe-column>
<vxe-column field="sex" title="Sex" width="100"></vxe-column>
<vxe-column field="sex2" title="Sex" width="200"></vxe-column>
</vxe-colgroup>
<vxe-column field="updateTime1" title="UpdateTime" width="200"></vxe-column>
<vxe-colgroup title="详细信息">
<vxe-colgroup title="分组">
<vxe-column field="rate" title="Rate" width="200"></vxe-column>
<vxe-column field="rate" title="Rate" width="150"></vxe-column>
<vxe-column field="region" title="Region" width="200"></vxe-column>
<vxe-column field="region1" title="Region" width="200"></vxe-column>
<vxe-column field="region2" title="Region" width="150"></vxe-column>
<vxe-column field="region3" title="Region" width="200"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="其他">
<vxe-column field="time" title="Time" width="200" sortable></vxe-column>
<vxe-column field="address" title="Address" width="300" show-overflow></vxe-column>
<vxe-column field="address" title="Address" width="100" show-overflow></vxe-column>
<vxe-column field="address1" title="Address" width="300" show-overflow></vxe-column>
<vxe-column field="address2" title="Address" width="100" show-overflow></vxe-column>
<vxe-column field="address3" title="Address" width="150" show-overflow></vxe-column>
<vxe-column field="address4" title="Address" width="150" show-overflow></vxe-column>
<vxe-column field="address5" title="Address" width="300" show-overflow></vxe-column>
</vxe-colgroup>
</vxe-colgroup>
<vxe-column field="updateTime" title="UpdateTime" width="200"></vxe-column>
<vxe-colgroup title="详细信息2">
<vxe-colgroup title="分组">
<vxe-column field="rate2" title="Rate" width="150"></vxe-column>
<vxe-column field="region22" title="Region" width="200"></vxe-column>
<vxe-column field="region21" title="Region" width="200"></vxe-column>
<vxe-column field="region22" title="Region" width="150"></vxe-column>
<vxe-column field="region23" title="Region" width="200"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="其他2">
<vxe-column field="time22" title="Time" width="200" sortable></vxe-column>
<vxe-column field="address2" title="Address" width="100" show-overflow></vxe-column>
<vxe-column field="address21" title="Address" width="100" show-overflow></vxe-column>
<vxe-column field="address22" title="Address" width="150" show-overflow></vxe-column>
<vxe-column field="address23" title="Address" width="100" show-overflow></vxe-column>
<vxe-column field="address24" title="Address" width="150" show-overflow></vxe-column>
<vxe-column field="address25" title="Address" width="100" show-overflow></vxe-column>
</vxe-colgroup>
</vxe-colgroup>
<vxe-column field="updateTime" title="UpdateTime" width="100"></vxe-column>
<vxe-column field="createTime" title="CreateTime" width="200"></vxe-column>
</vxe-table>
@@ -85,87 +115,7 @@ export default defineComponent({
return {
demo1,
xTable,
demoCodes: [
`
<vxe-table
border
resizable
show-overflow
ref="xTable"
height="500"
:scroll-x="{enabled: false}"
:loading="demo1.loading">
<vxe-column type="seq" title="序号" width="100"></vxe-column>
<vxe-colgroup title="基本信息">
<vxe-column field="name" title="Name" width="200" sortable></vxe-column>
<vxe-column field="age" title="Age" width="200"></vxe-column>
<vxe-column field="sex" title="Sex" width="200"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="详细信息">
<vxe-colgroup title="分组">
<vxe-column field="rate" title="Rate" width="200"></vxe-column>
<vxe-column field="region" title="Region" width="200"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="其他">
<vxe-column field="time" title="Time" width="200" sortable></vxe-column>
<vxe-column field="address" title="Address" width="300" show-overflow></vxe-column>
</vxe-colgroup>
</vxe-colgroup>
<vxe-column field="updateTime" title="UpdateTime" width="200"></vxe-column>
<vxe-column field="createTime" title="CreateTime" width="200"></vxe-column>
</vxe-table>
`,
`
import { defineComponent, reactive, ref, onMounted, nextTick } from 'vue'
import { VxeTableInstance } from 'vxe-table'
export default defineComponent({
setup () {
const mockList = (size: number): Promise<any[]> => {
return new Promise(resolve => {
const list: any[] = []
for (let index = 0; index < size; index++) {
list.push({
name: \`名称\${index}\`,
sex: '0',
num: 123,
age: 18,
num2: 234,
rate: 3,
address: 'shenzhen'
})
}
resolve(list)
})
}
const xTable = ref({} as VxeTableInstance)
const demo1 = reactive({
loading: false
})
demo1.loading = true
onMounted(() => {
mockList(1000).then(data => {
demo1.loading = false
nextTick(() => {
const $table = xTable.value
if ($table) {
$table.loadData(data)
}
})
})
})
return {
demo1,
xTable
}
}
})
`
]
demoCodes: []
}
}
})

3
examples/views/table/scroll/Scroll.vue
View File

@@ -3,7 +3,8 @@
<p class="tip">
虚拟滚动<span class="orange">（最大可以支撑 10w 列、30w 行）</span><br>
高性能的虚拟渲染，默认情况下，如果设置了 <table-api-link prop="height"/>、<table-api-link prop="max-height"/> 则会根据触发规则自动启用虚拟渲染，触发规则由 <table-api-link prop="scroll-x"/>.<table-api-link prop="gt"/> | <table-api-link prop="scroll-y"/>.<table-api-link prop="gt"/> 设置。虚拟滚动启用后只会渲染指定范围内的可视区数据，其他的数据将被卷去收起，当滚动到可视区时才被渲染出来<br>
<span class="red">（注：启用虚拟滚动后：<table-api-link prop="show-overflow"/>，<table-api-link prop="show-header-overflow"/>，<table-api-link prop="show-footer-overflow"/> 参数将根据不同场景各自触发生效，无法取消；如果需要支持，将虚拟滚动关闭即可）</span>
<span class="red">（注：启用虚拟滚动后：<table-api-link prop="show-overflow"/>，<table-api-link prop="show-header-overflow"/>，<table-api-link prop="show-footer-overflow"/> 参数将根据不同场景各自触发生效，无法取消；如果需要支持，将虚拟滚动关闭即可）</span><br>
<span class="green">（性能优化：横向虚拟滚动由列宽性能，也就是列宽越大就越流畅；纵向虚拟滚动由行高决定性能，每一行的高度越高就越流畅）</span>
</p>
<vxe-table

3
examples/views/table/scroll/ScrollCols.vue
View File

@@ -2,8 +2,7 @@
<div>
<p class="tip">
虚拟滚动渲染<br>
大数据不建议使用双向绑定的 <table-api-link name="data"/> 属性，建议使用 <table-api-link prop="loadData"/>/<table-api-link prop="loadColumn"/> 函数<br>
<span class="red">(注：如果要启用横向虚拟滚动，不支持分组表头)</span>
大数据不建议使用双向绑定的 <table-api-link name="data"/> 属性，建议使用 <table-api-link prop="loadData"/>/<table-api-link prop="loadColumn"/> 函数
</p>
<vxe-grid ref="xGrid" v-bind="gridOptions">

3
examples/views/table/scroll/ScrollFullCols.vue
View File

@@ -3,8 +3,7 @@
<p class="tip">
虚拟滚动渲染，左右固定列<br>
大数据不建议使用双向绑定的 <table-api-link name="data"/> 属性，建议使用 <table-api-link prop="loadData"/>/<table-api-link prop="loadColumn"/> 函数<br>
对于多选 type=<table-column-api-link prop="checkbox"/> 当数据量海量时应该绑定 <table-api-link prop="checkField"/> 属性渲染速度更快<br>
<span class="red">(注：如果要启用横向虚拟滚动，不支持分组表头)</span>
对于多选 type=<table-column-api-link prop="checkbox"/> 当数据量海量时应该绑定 <table-api-link prop="checkField"/> 属性渲染速度更快
</p>
<vxe-grid ref="xGrid" v-bind="gridOptions">

6
packages/footer/src/footer.ts
View File

@@ -103,12 +103,12 @@ export default defineComponent({
let { fixedType, fixedColumn, tableColumn, footerTableData } = props
const { footerRowClassName, footerCellClassName, footerRowStyle, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
const { visibleColumn } = tableInternalData
const { scrollYLoad, overflowX, scrollbarWidth, currentColumn, mergeFooterList } = tableReactData
const { scrollXLoad, overflowX, scrollbarWidth, currentColumn, mergeFooterList } = tableReactData
const tooltipOpts = computeTooltipOpts.value
const columnOpts = computeColumnOpts.value
// 如果是使用优化模式
if (fixedType) {
if (scrollYLoad || allColumnFooterOverflow) {
if (scrollXLoad || allColumnFooterOverflow) {
if (!mergeFooterList.length || !footerSpanMethod) {
tableColumn = fixedColumn
} else {
@@ -179,7 +179,7 @@ export default defineComponent({
const itemIndex = _columnIndex
const params: VxeTableDefines.CellRenderFooterParams = { $table: $xetable, _rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, itemIndex, items: list, fixed: fixedType, type: renderType, data: footerTableData }
// 纵向虚拟滚动不支持动态行高
if (scrollYLoad && !hasEllipsis) {
if (scrollXLoad && !hasEllipsis) {
showEllipsis = hasEllipsis = true
}
if (showTitle || showTooltip || showAllTip) {

22
packages/header/src/header.ts
View File

@@ -48,7 +48,7 @@ export default defineComponent({
const { clientX: dragClientX } = evnt
const wrapperElem = refElem.value
const dragBtnElem = evnt.target as HTMLDivElement
const cell = params.cell = dragBtnElem.parentNode as HTMLTableHeaderCellElement
const cell = params.cell = dragBtnElem.parentNode as HTMLTableCellElement
let dragLeft = 0
const tableBodyElem = tableBody.$el as HTMLDivElement
const pos = getOffsetPos(dragBtnElem, wrapperElem)
@@ -67,14 +67,14 @@ export default defineComponent({
let fixedOffsetWidth = 0
if (isLeftFixed || isRightFixed) {
const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling'
let tempCellElem = cell[siblingProp] as HTMLTableHeaderCellElement
let tempCellElem = cell[siblingProp] as HTMLTableCellElement
while (tempCellElem) {
if (hasClass(tempCellElem, 'fixed--hidden')) {
break
} else if (!hasClass(tempCellElem, 'col--group')) {
fixedOffsetWidth += tempCellElem.offsetWidth
}
tempCellElem = tempCellElem[siblingProp] as HTMLTableHeaderCellElement
tempCellElem = tempCellElem[siblingProp] as HTMLTableCellElement
}
if (isRightFixed && rightContainerElem) {
dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth
@@ -161,19 +161,23 @@ export default defineComponent({
})
const renderVN = () => {
let { fixedType, fixedColumn, tableColumn } = props
const { fixedType, fixedColumn, tableColumn } = props
const { resizable, border, columnKey, headerRowClassName, headerCellClassName, headerRowStyle, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
const { isGroup, currentColumn, scrollXLoad, overflowX, scrollbarWidth } = tableReactData
const { visibleColumn } = tableInternalData
const columnOpts = computeColumnOpts.value
let headerGroups: VxeTableDefines.ColumnInfo[][] = headerColumn.value
// 如果是使用优化模式
if (!isGroup) {
let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
if (isGroup) {
renderColumnList = visibleColumn
} else {
// 如果是使用优化模式
if (fixedType) {
if (scrollXLoad || allColumnHeaderOverflow) {
tableColumn = fixedColumn
renderColumnList = fixedColumn as VxeTableDefines.ColumnInfo[]
}
}
headerGroups = [tableColumn as VxeTableDefines.ColumnInfo[]]
headerGroups = [renderColumnList]
}
return h('div', {
ref: refElem,
@@ -197,7 +201,7 @@ export default defineComponent({
*/
h('colgroup', {
ref: refHeaderColgroup
}, (tableColumn as VxeTableDefines.ColumnInfo[]).map((column, $columnIndex) => {
}, renderColumnList.map((column, $columnIndex) => {
return h('col', {
name: column.id,
key: $columnIndex

1
packages/locale/lang/en-US.ts
View File

@@ -8,7 +8,6 @@ export default {
groupMouseRange: 'Grouping headers and "{0}" cannot be used at the same time, which may cause errors.',
groupTag: 'Grouping column header should use "{0}" instead of "{1}", which may cause errors.',
scrollErrProp: 'The parameter "{0}" is not supported when virtual scrolling is enabled.',
scrollXNotGroup: 'Horizontal virtual scrolling does not support grouping headers. You need to set the parameter "scroll-x.enabled=false", otherwise, errors may occur.',
errConflicts: 'Argument "{0}" conflicts with "{1}"',
unableInsert: 'Unable to insert to the specified location.',
useErr: 'Error installing "{0}" module, possibly in the wrong order, dependent modules need to be installed before Table.',

1
packages/locale/lang/ja-JP.ts
View File

@@ -8,7 +8,6 @@ export default {
groupMouseRange: 'グループ化ヘッダーと「{0}」は同時に使用できません。これによりエラーが発生する可能性があります',
groupTag: '分组列头应该使用 "{0}" 而不是 "{1}"，这可能会出现错误',
scrollErrProp: '启用虚拟滚动后不支持该参数 "{0}"',
scrollXNotGroup: '横向虚拟滚动不支持分组表头，需要设置 "scroll-x.enabled=false" 参数，否则可能会导致出现错误',
errConflicts: '参数 "{0}" 与 "{1}" 有冲突',
unableInsert: '指定された位置に挿入できない',
useErr: '"{0}" モジュールをインストールする際にエラーが発生し,順序が正しくない可能性があり,依頼するモジュールはTableの前にインストールする必要がある',

1
packages/locale/lang/zh-CN.ts
View File

@@ -8,7 +8,6 @@ export default {
groupMouseRange: '分组表头与 "{0}" 不能同时使用，这可能会出现错误',
groupTag: '分组列头应该使用 "{0}" 而不是 "{1}"，这可能会出现错误',
scrollErrProp: '启用虚拟滚动后不支持该参数 "{0}"',
scrollXNotGroup: '横向虚拟滚动不支持分组表头，需要设置 "scroll-x.enabled=false" 参数，否则可能会导致出现错误',
errConflicts: '参数 "{0}" 与 "{1}" 有冲突',
unableInsert: '无法插入到指定位置，请检查参数是否正确',
useErr: '安装 "{0}" 模块时发生错误，可能顺序不正确，依赖的模块需要在 Table 之前安装',

1
packages/locale/lang/zh-TC.ts
View File

@@ -8,7 +8,6 @@ export default {
groupMouseRange: '分组表頭與 "{0}" 不能同時使用，這可能會出現錯誤',
groupTag: '分組列頭應該使用 "{0}" 而不是 "{1}"，這可能會出現錯誤',
scrollErrProp: '啟用虛擬滾動後不支持該參數 "{0}"',
scrollXNotGroup: '橫向虛擬滾動不支持分組表頭，需要設定 "scroll-x.enabled=false" 參數，否則可能會導致出現錯誤',
errConflicts: '參數 "{0}" 與 "{1}" 有衝突',
unableInsert: '無法插入到指定位置，請檢查參數是否正確',
useErr: '安裝 "{0}" 模組時發生錯誤，可能順序不正確，依賴的模組需要在Table之前安裝',

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

@@ -1337,7 +1337,7 @@ export default defineComponent({
const updateStyle = () => {
const { border, showFooter, showOverflow: allColumnOverflow, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod, keyboardConfig } = props
let { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, scrollbarWidth, scrollbarHeight, columnStore, editStore, mergeList, mergeFooterList, isAllOverflow } = reactData
const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, scrollbarWidth, scrollbarHeight, columnStore, editStore, mergeList, mergeFooterList, isAllOverflow } = reactData
let { visibleColumn, fullColumnIdData, tableHeight, tableWidth, headerHeight, footerHeight, elemStore, customHeight, customMaxHeight } = internalData
const containerList = ['main', 'left', 'right']
const emptyPlaceholderElem = refEmptyPlaceholder.value
@@ -1374,20 +1374,20 @@ export default defineComponent({
// 表头体样式处理
// 横向滚动渲染
let tWidth = tableWidth
let renderColumnList = tableColumn
// 如果是使用优化模式
let isOptimize = false
if (!isGroup) {
if (isGroup) {
renderColumnList = visibleColumn
} else {
// 如果是使用优化模式
if (fixedType) {
if (scrollXLoad || allColumnHeaderOverflow) {
isOptimize = true
renderColumnList = fixedColumn
}
}
}
if (isOptimize) {
tableColumn = fixedColumn
}
tWidth = tableColumn.reduce((previous, column) => previous + column.renderWidth, 0)
tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
if (tableElem) {
tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : ''
@@ -1457,20 +1457,21 @@ export default defineComponent({
}
let tWidth = tableWidth
let renderColumnList = tableColumn
// 如果是使用优化模式
if (fixedType) {
if (scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) {
tableColumn = fixedColumn
renderColumnList = fixedColumn
} else {
tableColumn = visibleColumn
renderColumnList = visibleColumn
}
} else {
tableColumn = visibleColumn
renderColumnList = visibleColumn
}
}
tWidth = tableColumn.reduce((previous, column) => previous + column.renderWidth, 0)
tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
if (tableElem) {
tableElem.style.width = tWidth ? `${tWidth}px` : ''
@@ -1483,19 +1484,20 @@ export default defineComponent({
} else if (layout === 'footer') {
let tWidth = tableWidth
let renderColumnList = tableColumn
// 如果是使用优化模式
if (fixedType) {
if (scrollXLoad || allColumnFooterOverflow) {
if (!mergeFooterList.length || !footerSpanMethod) {
tableColumn = fixedColumn
renderColumnList = fixedColumn
} else {
tableColumn = visibleColumn
renderColumnList = visibleColumn
}
} else {
tableColumn = visibleColumn
renderColumnList = visibleColumn
}
}
tWidth = tableColumn.reduce((previous, column) => previous + column.renderWidth, 0)
tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
if (isNodeElement(wrapperElem)) {
// 如果是固定列
@@ -2168,15 +2170,9 @@ export default defineComponent({
})
}
const visibleColumn = leftList.concat(centerList).concat(rightList)
let scrollXLoad = !!sXOpts.enabled && sXOpts.gt > -1 && sXOpts.gt < tableFullColumn.length
const scrollXLoad = !!sXOpts.enabled && sXOpts.gt > -1 && sXOpts.gt < tableFullColumn.length
reactData.hasFixedColumn = leftList.length > 0 || rightList.length > 0
Object.assign(columnStore, { leftList, centerList, rightList })
if (scrollXLoad && isGroup) {
scrollXLoad = false
if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
warnLog('vxe.error.scrollXNotGroup')
}
}
if (scrollXLoad) {
if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
if (props.showHeader && !props.showHeaderOverflow) {
@@ -5339,7 +5335,7 @@ export default defineComponent({
},
// 更新横向 X 可视渲染上下剩余空间大小
updateScrollXSpace () {
const { scrollXLoad, scrollbarWidth } = reactData
const { isGroup, scrollXLoad, scrollbarWidth } = reactData
const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData
const tableHeader = refTableHeader.value
const tableBody = refTableBody.value
@@ -5357,7 +5353,7 @@ export default defineComponent({
marginLeft = `${leftSpaceWidth}px`
}
if (headerElem) {
headerElem.style.marginLeft = marginLeft
headerElem.style.marginLeft = isGroup ? '' : marginLeft
}
bodyElem.style.marginLeft = marginLeft
if (footerElem) {

70
styles/icon.scss
View File

File diff suppressed because one or more lines are too long