Skip to content

Commit

Permalink
fix 修复表尾固定列显示错误问题 x-extends#1851
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuliangzhan
xuliangzhan committed Sep 10, 2022
1 parent 20eb920 commit 2fbfe82
Show file tree
Hide file tree
Showing 14 changed files with 151 additions and 138 deletions.
2 changes: 1 addition & 1 deletion examples/api/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2806,7 +2806,7 @@ const apis = [
},
{
name: 'gt',
desc: '指定大于指定列时自动启动横向虚拟滚动，如果为 0 则总是启用，如果为 -1 则关闭（注：启用横向虚拟滚动之后将不能支持分组表头）',
desc: '指定大于指定列时自动启动横向虚拟滚动，如果为 0 则总是启用，如果为 -1 则关闭',
version: '',
type: 'number',
enum: '',
Expand Down
2 changes: 1 addition & 1 deletion examples/views/icon/Icon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
126 changes: 38 additions & 88 deletions examples/views/table/scroll/Group.vue
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,62 @@
<template>
<div>
<p class="tip">分组表头<br><span class="red">（注：分组表头不支持横向虚拟滚动，通过设置 scroll-x={enabled: false} 关闭即可）</span></p>
<p class="tip">分组表头</p>

<vxe-table
border
resizable
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>

Expand Down Expand Up @@ -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: []
}
}
})
Expand Down
3 changes: 2 additions & 1 deletion examples/views/table/scroll/Scroll.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 1 addition & 2 deletions examples/views/table/scroll/ScrollCols.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
3 changes: 1 addition & 2 deletions examples/views/table/scroll/ScrollFullCols.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions packages/footer/src/footer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down
22 changes: 13 additions & 9 deletions packages/header/src/header.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down
Loading

0 comments on commit 2fbfe82

Please sign in to comment.