Skip to content

Commit 4db7a4e

Browse files
xuliangzhanxuliangzhan
committed
releases 4.13.29
1 parent aea9580 commit 4db7a4e

File tree

3 files changed

+196
-24
lines changed

3 files changed

+196
-24
lines changed

‎examples/views/grid/GridTest.vue‎

Lines changed: 169 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
<template>
22
<div>
33
<vxe-select v-model="rowSize" :options="dataOptions" @change="loadData()"></vxe-select>
4-
<vxe-grid v-bind="gridOptions"></vxe-grid>
4+
<vxe-grid v-bind="gridOptions">
5+
<template #status="{ row }">
6+
<vxe-tag v-if="row.status === '2'" status="error">驳回</vxe-tag>
7+
<vxe-tag v-else-if="row.status === '1'" status="primary">待处理</vxe-tag>
8+
<vxe-tag v-else status="success">已完成</vxe-tag>
9+
</template>
10+
11+
<template #action>
12+
<vxe-button mode="text" status="primary">编辑</vxe-button>
13+
<vxe-button mode="text" status="error">删除</vxe-button>
14+
</template>
15+
</vxe-grid>
516
</div>
617
</template>
718

8-
<script setup>
19+
<script lang="ts" setup>
920
import { ref, reactive, nextTick } from 'vue'
1021
import { VxeUI } from '../../../packages'
22+
import { VxeGridProps, VxeColumnPropTypes } from '../../../types'
23+
24+
interface RowVO {
25+
id: number
26+
[key: string]: string | number | boolean | any[]
27+
}
1128
12-
const rowSize = ref(100)
29+
const rowSize = ref(500)
1330
const dataOptions = ref([
1431
{ label: '加载 3 行', value: 3 },
1532
{ label: '加载 20 行', value: 20 },
@@ -20,49 +37,182 @@ const dataOptions = ref([
2037
{ label: '加载 10000 行', value: 10000 },
2138
{ label: '加载 30000 行', value: 30000 }
2239
])
23-
const imgUrlCellRender = reactive({
40+
41+
const flag1CellRender = reactive<VxeColumnPropTypes.CellRender>({
42+
name: 'VxeSwitch'
43+
})
44+
45+
const imgUrlCellRender = reactive<VxeColumnPropTypes.CellRender>({
2446
name: 'VxeImage',
2547
props: {
2648
width: 36,
2749
height: 36
2850
}
2951
})
30-
const gridOptions = reactive({
52+
53+
const imgList1CellRender = reactive<VxeColumnPropTypes.CellRender>({
54+
name: 'VxeUpload',
55+
props: {
56+
mode: 'image',
57+
readonly: true,
58+
moreConfig: {
59+
maxCount: 2
60+
},
61+
imageConfig: {
62+
width: 40,
63+
height: 40
64+
}
65+
}
66+
})
67+
68+
const gridOptions = reactive<VxeGridProps<RowVO>>({
3169
border: true,
3270
loading: false,
71+
showFooter: true,
3372
height: 800,
3473
columnConfig: {
3574
resizable: true
3675
},
76+
virtualXConfig: {
77+
enabled: true,
78+
gt: 0
79+
},
3780
virtualYConfig: {
3881
enabled: true,
3982
gt: 0
4083
},
4184
columns: [
42-
{ type: 'checkbox', width: 60 },
43-
{ title: '列0', field: 'col0', width: 100 },
44-
{ title: '列1', field: 'imgUrl', width: 80, cellRender: imgUrlCellRender },
45-
{ title: '列2', field: 'col2', width: 90 },
85+
{ field: 'checkbox', type: 'checkbox', width: 60, fixed: 'left' },
86+
{ title: '列0', field: 'col0', width: 100, fixed: 'left' },
87+
{ title: '列1', field: 'imgUrl', width: 80, fixed: 'left', cellRender: imgUrlCellRender },
88+
{ title: '状态', field: 'status', width: 90, slots: { default: 'status' } },
4689
{ title: '列3', field: 'col3', width: 200 },
4790
{ title: '列4', field: 'col4', width: 140 },
4891
{ title: '列5', field: 'col5', width: 300 },
49-
{ title: '列6', field: 'col6', minWidth: 160 },
50-
{ title: '列7', field: 'col7', minWidth: 120 },
51-
{ title: '列8', field: 'col8', minWidth: 120 }
92+
{ title: '列6', field: 'col6', width: 160 },
93+
{ title: '列7', field: 'col7', width: 120 },
94+
{ title: '列8', field: 'col8', width: 400 },
95+
{ title: '列9', field: 'col9', width: 160 },
96+
{ title: '列10', field: 'col10', width: 160 },
97+
{ title: '列11', field: 'col11', width: 180 },
98+
{ title: '列12', field: 'col12', width: 160 },
99+
{ title: '列13', field: 'col13', width: 80 },
100+
{ title: '列14', field: 'col14', width: 120 },
101+
{ title: '列15', field: 'col15', width: 360 },
102+
{ title: '列16', field: 'col16', width: 150 },
103+
{ title: '列17', field: 'col17', width: 380 },
104+
{ title: '列18', field: 'col18', width: 100 },
105+
{ title: '列19', field: 'col19', width: 290 },
106+
{ title: '列20', field: 'col20', width: 80 },
107+
{ title: '列21', field: 'col21', width: 100 },
108+
{ title: '列22', field: 'col22', width: 120 },
109+
{ title: '列23', field: 'col23', width: 270 },
110+
{ title: '列24', field: 'col24', width: 330 },
111+
{ title: '列25', field: 'col25', width: 460 },
112+
{ title: '列26', field: 'col26', width: 280 },
113+
{ title: '列27', field: 'col27', width: 220 },
114+
{ title: '列28', field: 'col28', width: 120 },
115+
{ title: '列29', field: 'col29', width: 180 },
116+
{ title: '列30', field: 'col30', width: 500 },
117+
{ title: '列31', field: 'col31', width: 600 },
118+
{ title: '列32', field: 'col32', width: 100 },
119+
{ title: '列33', field: 'col33', width: 490 },
120+
{ title: '列34', field: 'col34', width: 100 },
121+
{ title: '列35', field: 'col35', width: 150 },
122+
{ title: '列36', field: 'col36', width: 800 },
123+
{ title: '列37', field: 'col37', width: 400 },
124+
{ title: '列38', field: 'col38', width: 800 },
125+
{ title: '列39', field: 'col39', width: 360 },
126+
{ title: '列40', field: 'col40', width: 420 },
127+
{ title: '列41', field: 'col41', width: 100 },
128+
{ title: '列42', field: 'col42', width: 120 },
129+
{ title: '列43', field: 'col43', width: 280 },
130+
{ title: '列44', field: 'col44', width: 170 },
131+
{ title: '列45', field: 'col45', width: 370 },
132+
{ title: '列46', field: 'col46', width: 420 },
133+
{ title: '列47', field: 'col47', width: 170 },
134+
{ title: '列48', field: 'col48', width: 400 },
135+
{ title: '列49', field: 'col49', width: 220 },
136+
{ title: '列50', field: 'col50', width: 170 },
137+
{ title: '列51', field: 'col51', width: 160 },
138+
{ title: '列52', field: 'col52', width: 500 },
139+
{ title: '列53', field: 'col53', width: 280 },
140+
{ title: '列54', field: 'col54', width: 170 },
141+
{ title: '列55', field: 'col55', width: 370 },
142+
{ title: '列56', field: 'col56', width: 120 },
143+
{ title: '列57', field: 'col57', width: 170 },
144+
{ title: '列58', field: 'col58', width: 400 },
145+
{ title: '列59', field: 'col59', width: 220 },
146+
{ title: '列60', field: 'col60', width: 650 },
147+
{ title: '列61', field: 'col61', width: 600 },
148+
{ title: '列62', field: 'col62', width: 100 },
149+
{ title: '列63', field: 'col63', width: 490 },
150+
{ title: '列64', field: 'col64', width: 100 },
151+
{ title: '列65', field: 'col65', width: 150 },
152+
{ title: '列66', field: 'col66', width: 800 },
153+
{ title: '列67', field: 'col67', width: 400 },
154+
{ title: '列68', field: 'col68', width: 800 },
155+
{ title: '列69', field: 'col69', width: 360 },
156+
{ title: '列70', field: 'col70', width: 650 },
157+
{ title: '列71', field: 'col71', width: 600 },
158+
{ title: '列72', field: 'col72', width: 100 },
159+
{ title: '列73', field: 'col73', width: 490 },
160+
{ title: '列74', field: 'col74', width: 100 },
161+
{ title: '列75', field: 'col75', width: 150 },
162+
{ title: '列76', field: 'col76', width: 800 },
163+
{ title: '列77', field: 'col77', width: 400 },
164+
{ title: '列78', field: 'col78', width: 800 },
165+
{ title: '列79', field: 'col79', width: 360 },
166+
{ title: '列80', field: 'col80', width: 650 },
167+
{ title: '列81', field: 'col81', width: 600 },
168+
{ title: '列82', field: 'col82', width: 100 },
169+
{ title: '列83', field: 'col83', width: 490 },
170+
{ title: '列84', field: 'col84', width: 100 },
171+
{ title: '列85', field: 'col85', width: 150 },
172+
{ title: '列86', field: 'col86', width: 800 },
173+
{ title: '列87', field: 'col87', width: 400 },
174+
{ title: '列88', field: 'col88', width: 800 },
175+
{ title: '列89', field: 'col89', width: 360 },
176+
{ title: '列90', field: 'col90', width: 650 },
177+
{ title: '列91', field: 'col91', width: 600 },
178+
{ title: '列92', field: 'col92', width: 100 },
179+
{ title: '列93', field: 'col93', width: 490 },
180+
{ title: '列94', field: 'col94', width: 100 },
181+
{ title: '列95', field: 'col95', width: 150 },
182+
{ title: '列96', field: 'col96', width: 800 },
183+
{ title: '列97', field: 'col97', width: 400 },
184+
{ title: '列99', field: 'imgList1', width: 120, fixed: 'right', cellRender: imgList1CellRender },
185+
{ title: '列100', field: 'flag1', width: 100, fixed: 'right', cellRender: flag1CellRender },
186+
{ title: '操作', field: 'action', width: 120, fixed: 'right', slots: { default: 'action' } }
52187
],
53-
data: []
188+
data: [],
189+
footerData: [
190+
{ checkbox: '均值', col0: '45', col1: '56', col3: '67', col5: '78', col7: '94', col97: '37', imgList1: '83' },
191+
{ checkbox: '合计', col0: '222', col1: '333', col3: '444', col5: '888', col7: '555', col97: '444', imgList1: '777' }
192+
]
54193
})
194+
55195
// 模拟行数据
56196
const loadData = () => {
57197
gridOptions.loading = true
58198
setTimeout(() => {
59-
const dataList = []
199+
const dataList: RowVO[] = []
60200
for (let i = 0; i < rowSize.value; i++) {
61-
const item = {
201+
const item: RowVO = {
62202
id: 10000 + i,
63-
imgUrl: i % 3 === 0 ? 'https://vxeui.com/resource/img/546.gif' : 'https://vxeui.com/resource/img/673.gif'
203+
status: i % 3 === 0 ? '1' : (i % 2 === 0 ? '2' : '0'),
204+
imgUrl: i % 3 === 0 ? 'https://vxeui.com/resource/img/546.gif' : 'https://vxeui.com/resource/img/673.gif',
205+
imgList1: i % 4 === 0
206+
? [
207+
{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
208+
]
209+
: [
210+
{ name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
211+
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
212+
],
213+
flag1: i % 5 === 0
64214
}
65-
for (let j = 0; j < 10; j++) {
215+
for (let j = 0; j < 100; j++) {
66216
if (i % 9 === 0) {
67217
item[`col${j}`] = `值_${i}_${j} 内容9内容9 内容9内容9内容9 内容9内容9内容9内容9 内容9内容9内容9内容9 内容9内容9内容9 内容9内容9`
68218
} else if (i % 8 === 0) {
@@ -81,6 +231,7 @@ const loadData = () => {
81231
}
82232
dataList.push(item)
83233
}
234+
84235
const startTime = Date.now()
85236
gridOptions.data = dataList
86237
gridOptions.loading = false
@@ -92,6 +243,6 @@ const loadData = () => {
92243
})
93244
}, 350)
94245
}
95-
loadData()
96246
247+
loadData()
97248
</script>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vxe-table",
3-
"version": "4.13.28",
3+
"version": "4.13.29",
44
"description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
55
"scripts": {
66
"update": "npm install --legacy-peer-deps",

‎packages/table/src/table.ts‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3916,7 +3916,7 @@ export default defineComponent({
39163916
}
39173917

39183918
const checkLastSyncScroll = (isRollX: boolean, isRollY: boolean) => {
3919-
const { scrollXLoad, scrollYLoad } = reactData
3919+
const { scrollXLoad, scrollYLoad, isAllOverflow } = reactData
39203920
const { lcsTimeout } = internalData
39213921
if (lcsTimeout) {
39223922
clearTimeout(lcsTimeout)
@@ -3932,13 +3932,19 @@ export default defineComponent({
39323932
internalData.inFooterScroll = false
39333933
internalData.scrollRenderType = ''
39343934

3935-
calcCellHeight()
3935+
if (!isAllOverflow) {
3936+
calcCellHeight()
3937+
updateRowOffsetTop()
3938+
}
39363939
if (isRollX && scrollXLoad) {
39373940
$xeTable.updateScrollXData()
39383941
}
39393942
if (isRollY && scrollYLoad) {
39403943
$xeTable.updateScrollYData().then(() => {
3941-
calcCellHeight()
3944+
if (!isAllOverflow) {
3945+
calcCellHeight()
3946+
updateRowOffsetTop()
3947+
}
39423948
$xeTable.updateScrollYSpace()
39433949
})
39443950
}
@@ -4969,6 +4975,7 @@ export default defineComponent({
49694975
}
49704976
XEUtils.eachTree([targetColumn], (column) => {
49714977
column.fixed = fixed
4978+
column.renderFixed = fixed
49724979
})
49734980
tablePrivateMethods.saveCustomStore('update:fixed')
49744981
if (!status) {
@@ -4993,6 +5000,7 @@ export default defineComponent({
49935000
if (targetColumn && targetColumn.fixed) {
49945001
XEUtils.eachTree([targetColumn], (column) => {
49955002
column.fixed = null
5003+
column.renderFixed = null
49965004
})
49975005
tablePrivateMethods.saveCustomStore('update:fixed')
49985006
if (!status) {
@@ -8578,10 +8586,14 @@ export default defineComponent({
85788586
if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
85798587
const ctEl = tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper')
85808588
let ovEl = null
8589+
let tipEl = tdEl.querySelector<HTMLElement>(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label')
85818590
if (column.treeNode) {
85828591
ovEl = tdEl.querySelector<HTMLElement>('.vxe-tree-cell')
85838592
}
8584-
handleTooltip(evnt, tdEl, ovEl || ctEl, tdEl.querySelector<HTMLElement>('.vxe-cell--label') || tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper'), params)
8593+
if (!tipEl) {
8594+
tipEl = ctEl
8595+
}
8596+
handleTooltip(evnt, tdEl, ovEl || ctEl, tipEl, params)
85858597
}
85868598
},
85878599
/**
@@ -8593,7 +8605,16 @@ export default defineComponent({
85938605
const tdEl = evnt.currentTarget as HTMLTableCellElement
85948606
handleTargetEnterEvent(tooltipStore.column !== column || !!tooltipStore.row)
85958607
if (tooltipStore.column !== column || !tooltipStore.visible) {
8596-
handleTooltip(evnt, tdEl, tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper'), tdEl.querySelector<HTMLElement>('.vxe-cell--label') || tdEl.querySelector('.vxe-cell--wrapper') as HTMLElement, params)
8608+
const ctEl = tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper')
8609+
let ovEl = null
8610+
let tipEl = tdEl.querySelector<HTMLElement>(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label')
8611+
if (column.type === 'html') {
8612+
ovEl = tdEl.querySelector<HTMLElement>('.vxe-cell--html')
8613+
}
8614+
if (!tipEl) {
8615+
tipEl = ctEl
8616+
}
8617+
handleTooltip(evnt, tdEl, ovEl || ctEl, tipEl, params)
85978618
}
85988619
},
85998620
handleTargetLeaveEvent () {

0 commit comments

Comments
 (0)