Skip to content

Commit be8105a

Browse files
huangshuweihuangshuwei
committed
Fix the bug of display position error when header grouping and right column fixed
1 parent 50c6eee commit be8105a

File tree

2 files changed

+226
-20
lines changed

2 files changed

+226
-20
lines changed

‎packages/ve-table/src/header/header-th.jsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -204,23 +204,26 @@ export default {
204204
if (fixed === "left") {
205205
key = keys[0];
206206
} else if (fixed === "right") {
207-
key = keys.length === 0 ? keys[0] : keys[keys.length - 1];
207+
key = keys.length === 1 ? keys[0] : keys[keys.length - 2];
208208
}
209-
// column index
210-
const columnIndex = colgroups.findIndex(x => x.key === key);
211-
if (
212-
(fixed === "left" && columnIndex > 0) ||
213-
(fixed === "right" && columnIndex < colgroups.length - 1)
214-
) {
215-
totalWidth = getFixedTotalWidthByColumnKey(
216-
colgroups,
217-
key,
218-
fixed
219-
);
220209

221-
totalWidth = getValByUnit(totalWidth);
210+
if (key) {
211+
// column index
212+
const columnIndex = colgroups.findIndex(x => x.key === key);
213+
if (
214+
(fixed === "left" && columnIndex > 0) ||
215+
(fixed === "right" &&
216+
columnIndex < colgroups.length - 1)
217+
) {
218+
totalWidth = getFixedTotalWidthByColumnKey(
219+
colgroups,
220+
key,
221+
fixed
222+
);
223+
224+
totalWidth = getValByUnit(totalWidth);
225+
}
222226
}
223-
224227
result["left"] = fixed === "left" ? totalWidth : "";
225228
result["right"] = fixed === "right" ? totalWidth : "";
226229
}

‎tests/unit/specs/ve-table-header-group.spec.js

Lines changed: 209 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@ describe("veTable header group", () => {
1111
col3: "3",
1212
col4: "4",
1313
col5: "5",
14-
col6: "6"
15-
/* col7: "7",
16-
col8: "8" */
14+
col6: "6",
15+
col7: "7",
16+
col8: "8",
17+
"col9-1": "9-1",
18+
"col9-2": "9-2",
19+
"col10-1": "10-1"
1720
},
1821
{
1922
rowkey: 1,
@@ -22,9 +25,12 @@ describe("veTable header group", () => {
2225
col3: "3",
2326
col4: "4",
2427
col5: "5",
25-
col6: "6"
26-
/* col7: "7",
27-
col8: "8" */
28+
col6: "6",
29+
col7: "7",
30+
col8: "8",
31+
"col9-1": "9-1",
32+
"col9-2": "9-2",
33+
"col10-1": "10-1"
2834
}
2935
];
3036

@@ -185,4 +191,201 @@ describe("veTable header group", () => {
185191
expect(thirdTrThEls.at(1).attributes("rowspan")).toBe("1");
186192
expect(thirdTrThEls.at(1).attributes("colspan")).toBe("1");
187193
});
194+
195+
it("width right column fixed section1", () => {
196+
/**
197+
* +------------------------------+
198+
* | | Title2 | Title3 |
199+
* | Title1 |----------|----------|
200+
* | | Title2-1 | Title3-1 |
201+
* +------------------------------+
202+
*/
203+
204+
const wrapper = mount(veTable, {
205+
propsData: {
206+
borderY: true,
207+
columns: [
208+
{ field: "col1", key: "a", title: "Title1" },
209+
{
210+
title: "Title2",
211+
fixed: "right",
212+
key: "b",
213+
children: [
214+
{
215+
field: "col2-1",
216+
key: "b-1",
217+
title: "Title2-1",
218+
width: 200
219+
}
220+
]
221+
},
222+
{
223+
title: "Title3",
224+
fixed: "right",
225+
key: "c",
226+
children: [
227+
{
228+
field: "col10-1",
229+
key: "c-1",
230+
title: "Title3-1",
231+
width: 200
232+
}
233+
]
234+
}
235+
],
236+
tableData: TABLE_DATA,
237+
rowKeyFieldName: "rowkey"
238+
}
239+
});
240+
241+
const trEls = wrapper.findAll(".ve-table-header-tr");
242+
243+
// first row first fixed column
244+
const firtRowFirstFixedColumn = trEls
245+
.at(0)
246+
.findAll(".ve-table-header-th")
247+
.at(1);
248+
249+
expect(firtRowFirstFixedColumn.classes()).toEqual([
250+
"ve-table-header-th",
251+
"ve-table-fixed-right",
252+
"ve-table-first-right-fixed-column"
253+
]);
254+
expect(firtRowFirstFixedColumn.attributes("style")).toContain(
255+
"right: 200px;"
256+
);
257+
258+
// first row last fixed column
259+
const firstRowLastFixedColumn = trEls
260+
.at(0)
261+
.findAll(".ve-table-header-th")
262+
.at(2);
263+
264+
expect(firstRowLastFixedColumn.classes()).toEqual([
265+
"ve-table-header-th",
266+
"ve-table-fixed-right",
267+
"ve-table-last-column"
268+
]);
269+
expect(firstRowLastFixedColumn.attributes("style")).toContain(
270+
"right: 0px;"
271+
);
272+
273+
// second row first fixed column
274+
const secondRowFirstFixedColumn = trEls
275+
.at(1)
276+
.findAll(".ve-table-header-th")
277+
.at(0);
278+
279+
expect(secondRowFirstFixedColumn.classes()).toEqual([
280+
"ve-table-header-th",
281+
"ve-table-fixed-right",
282+
"ve-table-first-right-fixed-column"
283+
]);
284+
expect(secondRowFirstFixedColumn.attributes("style")).toContain(
285+
"right: 200px;"
286+
);
287+
288+
// second row last fixed column
289+
const secondRowLastFixedColumn = trEls
290+
.at(1)
291+
.findAll(".ve-table-header-th")
292+
.at(1);
293+
294+
expect(secondRowLastFixedColumn.classes()).toEqual([
295+
"ve-table-header-th",
296+
"ve-table-fixed-right",
297+
"ve-table-last-column"
298+
]);
299+
expect(secondRowLastFixedColumn.attributes("style")).toContain(
300+
"right: 0px;"
301+
);
302+
});
303+
304+
it("width right column fixed section2", () => {
305+
/**
306+
* +------------------------------+
307+
* | | Title2 |
308+
* | Title1 |----------|----------|
309+
* | | Title2-1 | Title2-2 |
310+
* +------------------------------+
311+
*/
312+
313+
const wrapper = mount(veTable, {
314+
propsData: {
315+
borderY: true,
316+
columns: [
317+
{ field: "col1", key: "a", title: "Title1" },
318+
{
319+
title: "Title2",
320+
fixed: "right",
321+
key: "b",
322+
children: [
323+
{
324+
field: "col9-1",
325+
key: "b-1",
326+
title: "Title2-1",
327+
width: 200
328+
},
329+
{
330+
field: "col9-2",
331+
key: "b-2",
332+
title: "Title2-2",
333+
width: 200
334+
}
335+
]
336+
}
337+
],
338+
tableData: TABLE_DATA,
339+
rowKeyFieldName: "rowkey"
340+
}
341+
});
342+
343+
const trEls = wrapper.findAll(".ve-table-header-tr");
344+
345+
// first row first fixed column
346+
const firtRowFirstFixedColumn = trEls
347+
.at(0)
348+
.findAll(".ve-table-header-th")
349+
.at(1);
350+
351+
expect(firtRowFirstFixedColumn.classes()).toEqual([
352+
"ve-table-header-th",
353+
"ve-table-fixed-right",
354+
"ve-table-first-right-fixed-column",
355+
"ve-table-last-column"
356+
]);
357+
expect(firtRowFirstFixedColumn.attributes("style")).toContain(
358+
"right: 0px;"
359+
);
360+
361+
// second row first fixed column
362+
const secondRowFirstFixedColumn = trEls
363+
.at(1)
364+
.findAll(".ve-table-header-th")
365+
.at(0);
366+
367+
expect(secondRowFirstFixedColumn.classes()).toEqual([
368+
"ve-table-header-th",
369+
"ve-table-fixed-right",
370+
"ve-table-first-right-fixed-column"
371+
]);
372+
expect(secondRowFirstFixedColumn.attributes("style")).toContain(
373+
"right: 200px;"
374+
);
375+
376+
// second row last fixed column
377+
const secondRowLastFixedColumn = trEls
378+
.at(1)
379+
.findAll(".ve-table-header-th")
380+
.at(1);
381+
382+
expect(secondRowLastFixedColumn.classes()).toEqual([
383+
"ve-table-header-th",
384+
"ve-table-fixed-right",
385+
"ve-table-last-column"
386+
]);
387+
expect(secondRowLastFixedColumn.attributes("style")).toContain(
388+
"right: 0px;"
389+
);
390+
});
188391
});

0 commit comments

Comments
 (0)