,
16 | });
17 |
18 | groupFoldConstructor(list: ListItem[], conditions: { columnId: string; sort: 'desc' | 'asc' }[]) {
19 | console.log('groupFoldConstructor', list.length, conditions);
20 | return this.constructGroup(list, 0, conditions);
21 | }
22 |
23 | constructGroup(
24 | list: ListItem[],
25 | conditionIndex: number,
26 | conditions: { columnId: string; sort: 'desc' | 'asc' }[],
27 | ) {
28 | if (conditionIndex >= conditions.length) {
29 | return list;
30 | }
31 |
32 | const { columnId, sort } = conditions[conditionIndex];
33 |
34 | const sortedList = list.sort((a, b) => {
35 | if (sort === 'desc') {
36 | return (b[columnId] as string).localeCompare(a[columnId] as string);
37 | }
38 | return (a[columnId] as string).localeCompare(b[columnId] as string);
39 | });
40 |
41 | const res: ListItem[][] = [];
42 | let subGroup: ListItem[] = [];
43 |
44 | for (let i = 0; i < sortedList.length; i++) {
45 | const item = sortedList[i];
46 | if (item[columnId] === subGroup[subGroup.length - 1]?.[columnId]) {
47 | subGroup.push(item);
48 | } else {
49 | if (subGroup.length) {
50 | res.push(subGroup);
51 | }
52 | subGroup = [item];
53 | }
54 | }
55 |
56 | if (subGroup.length) {
57 | res.push(subGroup);
58 | }
59 |
60 | const groupList: ListItem[] = [];
61 | res.forEach((item) => {
62 | const v = item[0][columnId];
63 | groupList.push({
64 | id: `group-${columnId}-${nanoid(4)}`,
65 | type: 'group',
66 | columnId,
67 | name: v,
68 | children: this.constructGroup(item, conditionIndex + 1, conditions),
69 | });
70 | });
71 |
72 | return groupList;
73 | }
74 |
75 | generateFlatList(originList: ListItem[]) {
76 | const flattenList: ListItem[] = [];
77 |
78 | const { foldMap, expandMap } = this.groupState;
79 |
80 | const hasExpandCol = !!this.store.columnModule.flattedColumns.find(
81 | (col) => col.type === CellType.Expand,
82 | );
83 |
84 | const defaultExpandAll = this.store.getState('defaultExpandAll');
85 |
86 | this.store.gridRowMap = {};
87 |
88 | let level = 0;
89 | let groupLevel = 0;
90 | const flat = (list: ListItem[], isGroup = false) => {
91 | list.forEach((item, index) => {
92 | if (isGroup) {
93 | groupLevel += 1;
94 | }
95 |
96 | // const row = { ...item, level, groupLevel, isLastChild: index === list.length - 1 };
97 | // 需要用原始对象，否则不能响应式
98 | const row = Object.assign(item, {
99 | level,
100 | groupLevel,
101 | isLastChild: index === list.length - 1,
102 | });
103 | flattenList.push(row);
104 | this.store.gridRowMap[row.id] = row;
105 |
106 | if (item?.children && item?.children?.length > 0) {
107 | level += 1;
108 | foldMap[item.id] = !defaultExpandAll;
109 | if (defaultExpandAll) {
110 | flat(item.children, item.type === 'group');
111 | }
112 | level -= 1;
113 | }
114 |
115 | if (hasExpandCol) {
116 | expandMap[item.id] = !!defaultExpandAll;
117 | if (defaultExpandAll) {
118 | this.store.gridRowMap[`${item.id}-expand`] = {
119 | id: `${item.id}-expand`,
120 | type: 'expand',
121 | };
122 | }
123 | }
124 |
125 | if (expandMap[item.id]) {
126 | flattenList.push(this.store.gridRowMap[`${item.id}-expand`]);
127 | }
128 | if (isGroup) {
129 | groupLevel -= 1;
130 | }
131 | });
132 | };
133 | flat(originList);
134 |
135 | return flattenList;
136 | }
137 |
138 | resetFlatList(originList: ListItem[]) {
139 | const flattenList: ListItem[] = [];
140 | const { foldMap, expandMap } = this.groupState;
141 |
142 | let level = 0;
143 | let groupLevel = 0;
144 | const flat = (list: ListItem[], isGroup = false) => {
145 | list.forEach((item, index) => {
146 | if (isGroup) {
147 | groupLevel += 1;
148 | }
149 |
150 | // const row = { ...item, level, groupLevel, isLastChild: index === list.length - 1 };
151 | // 需要用原始对象，否则不能响应式
152 | const row = Object.assign(item, {
153 | level,
154 | groupLevel,
155 | isLastChild: index === list.length - 1,
156 | });
157 | flattenList.push(row);
158 | this.store.gridRowMap[row.id] = row;
159 |
160 | if (foldMap[item.id] === false && item?.children && item?.children?.length > 0) {
161 | level += 1;
162 | flat(item.children, item.type === 'group');
163 | level -= 1;
164 | }
165 | if (expandMap[item.id]) {
166 | flattenList.push(this.store.gridRowMap[`${item.id}-expand`]);
167 | }
168 | if (isGroup) {
169 | groupLevel -= 1;
170 | }
171 | });
172 | };
173 | flat(originList);
174 |
175 | this.store.setList(flattenList || []);
176 | }
177 |
178 | toggleFold(id: string) {
179 | const { foldMap } = this.groupState;
180 | foldMap[id] = !foldMap[id];
181 | this.resetFlatList(this.store.originList);
182 | }
183 |
184 | toggleExpand(id: string) {
185 | const tableEvents = useTableEvent(this.store);
186 | const { expandMap } = this.groupState;
187 | expandMap[id] = !expandMap[id];
188 | if (expandMap[id] && !this.store.gridRowMap[`${id}-expand`]) {
189 | this.store.gridRowMap[`${id}-expand`] = { id: `${id}-expand`, type: 'expand' };
190 | }
191 |
192 | // TODO yihuang 优化下性能用一次遍历解决
193 | const expandedRowKeys = Object.keys(expandMap)
194 | .filter((key) => !!expandMap[key])
195 | .map((id) => this.store.gridRowMap[id]);
196 |
197 | tableEvents.onExpandChange({ row: this.store.gridRowMap[id], expandedRows: expandedRowKeys });
198 | this.resetFlatList(this.store.originList);
199 | }
200 | }
201 |
--------------------------------------------------------------------------------
/src/store/popperStore.ts:
--------------------------------------------------------------------------------
1 | import { createApp, nextTick, type App } from 'vue';
2 | import { createPopper } from '@/src/popper/popper';
3 | import { GridStore } from '@/src/store';
4 | import { isFunction } from 'lodash-es';
5 |
6 | class PopperStore {
7 | gridStore: GridStore;
8 | coverEl: HTMLElement | null = null;
9 | coverApp: App | null = null;
10 | dropdownEl: HTMLElement | null = null;
11 | dropdownApp: App | null = null;
12 | tdData: any;
13 |
14 | constructor(gridStore: GridStore) {
15 | this.gridStore = gridStore;
16 |
17 | this.coverEl = document.createElement('div');
18 | this.coverEl.classList.add('vtg-popper-container');
19 | // TODO 需要判断是否有激活单元格选项配置
20 | // this.coverEl.classList.add('vtg-popper-container--cover');
21 | this.coverEl.addEventListener('click', this.toggleDropdownRender.bind(this));
22 |
23 | this.dropdownEl = document.createElement('div');
24 | this.dropdownEl.classList.add('vtg-popper-container');
25 | }
26 |
27 | coverRender(tdData: any) {
28 | this.tdData = tdData;
29 |
30 | if (!this.coverEl || !this.gridStore.clientEl) return;
31 | if (!isFunction(tdData?.column?.cellCoverRender)) {
32 | // 这里判断一下，没有cover，如果只有dropdown，那就直接渲染dropdown
33 | this.dropdownRender(tdData);
34 | return;
35 | }
36 | this.coverApp = createApp({
37 | render: () =>
38 | tdData.column.cellCoverRender?.(tdData, () => {
39 | this.remove();
40 | }),
41 | });
42 | createPopper({
43 | reference: tdData.el,
44 | mountEl: this.gridStore.clientEl,
45 | popperContainer: this.coverEl,
46 | popper: this.coverApp,
47 | isCover: true,
48 | });
49 | }
50 |
51 | toggleDropdownRender() {
52 | console.log('111', this.tdData);
53 | if (!this.dropdownEl) return;
54 | console.log('toggleDropdownRender', this.dropdownEl, this.dropdownApp);
55 |
56 | if (this.dropdownApp && this.gridStore.clientEl?.contains(this.dropdownEl)) {
57 | this.gridStore.clientEl?.removeChild(this.dropdownEl);
58 | } else if (this.dropdownApp) {
59 | this.gridStore.clientEl?.appendChild(this.dropdownEl);
60 | } else {
61 | this.dropdownRender(this.tdData);
62 | }
63 | }
64 |
65 | dropdownRender(tdData: any) {
66 | if (!this.coverEl || !this.dropdownEl || !this.gridStore.clientEl) return;
67 | if (!isFunction(tdData?.column?.cellDropdownRender)) return;
68 |
69 | this.dropdownApp = createApp({
70 | render: () => tdData.column.cellDropdownRender?.(tdData),
71 | });
72 |
73 | createPopper({
74 | reference: this.coverEl,
75 | mountEl: this.gridStore.clientEl,
76 | popperContainer: this.dropdownEl,
77 | popper: this.dropdownApp,
78 | isCover: false,
79 | });
80 | }
81 |
82 | remove() {
83 | console.log('remove');
84 | if (this.coverEl && this.gridStore.clientEl?.contains(this.coverEl)) {
85 | this.gridStore.clientEl?.removeChild(this.coverEl);
86 | this.coverApp = null;
87 | this.coverEl.removeEventListener('click', this.toggleDropdownRender);
88 | }
89 | if (this.dropdownEl && this.gridStore.clientEl?.contains(this.dropdownEl)) {
90 | this.gridStore.clientEl?.removeChild(this.dropdownEl);
91 | this.dropdownApp = null;
92 | }
93 | }
94 | }
95 |
96 | export { PopperStore };
97 |
--------------------------------------------------------------------------------
/src/styles/theme.scss:
--------------------------------------------------------------------------------
1 | $prefix: 'vtg';
2 |
3 | :root {
4 | // 表格元素层级
5 | --#{$prefix}-index-normal: 1;
6 | // 表格边框颜色
7 | --#{$prefix}-border-color: #e5e6eb;
8 | // 表格边框
9 | --#{$prefix}-border: 1px solid var(--#{$prefix}-border-color);
10 | // 表格字体颜色
11 | --#{$prefix}-text-color: #606266;
12 | // 表头字体颜色
13 | --#{$prefix}-header-text-color: #909399;
14 | // 表格行hover高亮背景
15 | --#{$prefix}-row-hover-bg-color: #f5f7fa;
16 | // 表格行斑马纹高亮背景
17 | --#{$prefix}-row-stripe-bg-color: #fafafa;
18 | // 行选中背景
19 | --#{$prefix}-current-row-bg-color: #fff7e6;
20 | // 列选中背景
21 | --#{$prefix}-current-column-bg-color: #fff7e6;
22 | // 表头背景
23 | --#{$prefix}-header-bg-color: #f2f3f5;
24 | // 表格固定列阴影
25 | --#{$prefix}-fixed-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
26 | // 表格背景颜色
27 | --#{$prefix}-bg-color: #ffffff;
28 | // 表格行背景颜色
29 | --#{$prefix}-tr-bg-color: #ffffff;
30 | // 表格展开列背景颜色
31 | --#{$prefix}-expanded-cell-bg-color: #ffffff;
32 | // 左固定列边框样式
33 | --#{$prefix}-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
34 | // 右固定列边框样式
35 | --#{$prefix}-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
36 | // 索引列层级
37 | --#{$prefix}-index: var(--#{$prefix}-index-normal);
38 | // 区域选中边框样式
39 | --#{$prefix}-select-border-color: #409eff;
40 | // 区域选中背景
41 | --#{$prefix}-select-bg-color: #ecf5ff;
42 | // 滚动条滑块颜色
43 | --#{$prefix}-scrollbar-thumb-color: rgba(182, 185, 192, 0.3);
44 | // 滚动条滑块hover颜色
45 | --#{$prefix}-scrollbar-thumb-color-hover: rgba(182, 185, 192, 0.5);
46 | // 树状连线颜色
47 | --#{$prefix}-tree-line-color: #303133;
48 | }
49 |
50 | html.dark {
51 | // 表格边框颜色
52 | --#{$prefix}-border-color: #363637;
53 | // 表格边框
54 | --#{$prefix}-border: 1px solid var(--#{$prefix}-border-color);
55 | // 表格字体颜色
56 | --#{$prefix}-text-color: #cfd3dc;
57 | // 表头字体颜色
58 | --#{$prefix}-header-text-color: #a3a6ad;
59 | // 表格行hover高亮背景
60 | --#{$prefix}-row-hover-bg-color: #262727;
61 | // 表格行斑马纹高亮背景
62 | --#{$prefix}-row-stripe-bg-color: #1d1d1d;
63 | // 行选中背景
64 | --#{$prefix}-current-row-bg-color: #2b2211;
65 | // 行选中背景
66 | --#{$prefix}-current-column-bg-color: #2b2211;
67 | // 表头背景
68 | --#{$prefix}-header-bg-color: #141414;
69 | // 表格固定列阴影
70 | --#{$prefix}-fixed-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.72);
71 | // 表格背景颜色
72 | --#{$prefix}-bg-color: #141414;
73 | // 表格行背景颜色
74 | --#{$prefix}-tr-bg-color: #141414;
75 | // 表格展开列背景颜色
76 | --#{$prefix}-expanded-cell-bg-color: #141414;
77 | // 左固定列边框样式
78 | --#{$prefix}-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
79 | // 右固定列边框样式
80 | --#{$prefix}-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
81 | // 索引列层级
82 | --#{$prefix}-index: var(--#{$prefix}-index-normal);
83 | // 区域选中边框样式
84 | --#{$prefix}-select-border-color: #409eff;
85 | // 区域选中背景
86 | --#{$prefix}-select-bg-color: #18222c;
87 | // 滚动条滑块颜色
88 | --#{$prefix}-scrollbar-thumb-color: rgba(163, 166, 173, 0.3);
89 | // 滚动条滑块hover颜色
90 | --#{$prefix}-scrollbar-thumb-color-hover: rgba(163, 166, 173, 0.5);
91 | // 树状连线颜色
92 | --#{$prefix}-tree-line-color: #4c4d4f;
93 | }
94 |
--------------------------------------------------------------------------------
/src/table/cell/CheckboxCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 | {{
9 | column.field ? row[column.field] : ''
10 | }}
11 |
12 |
13 |
39 |
--------------------------------------------------------------------------------
/src/table/cell/ExpandCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
18 |
19 |
33 |
--------------------------------------------------------------------------------
/src/table/cell/IndexCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ indexValue }}
4 |
5 |
6 |
16 |
--------------------------------------------------------------------------------
/src/table/cell/LinkView.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
8 |
12 |
--------------------------------------------------------------------------------
/src/table/cell/PersonView.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
15 |
44 |
--------------------------------------------------------------------------------
/src/table/cell/RadioCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{
5 | column.field ? row[column.field] : ''
6 | }}
7 |
8 |
9 |
26 |
--------------------------------------------------------------------------------
/src/table/cell/TextCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ row?.[column?.field] || '' }}
4 |
5 |
6 |
19 |
--------------------------------------------------------------------------------
/src/table/cell/TreeCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
40 |
41 |
42 |
43 | {{ column.field ? row[column.field] : '' }}
44 |
45 |
46 |
时间选择器
3 |
4 |
23 |
24 |
34 |
--------------------------------------------------------------------------------
/src/table/cell/date/DateView.vue:
--------------------------------------------------------------------------------
1 |
2 | 2024/09/25
3 |
4 |
5 |
6 |
10 |
--------------------------------------------------------------------------------
/src/table/cell/link/LinkCover.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 哈哈哈
6 | x
7 |
8 |
9 | 嘻嘻嘻
10 | x
11 |
12 |
13 | 恩恩恩
14 | x
15 |
16 |
17 |
31 |
3 |
6 |
7 |
8 |
9 |
10 |
哈哈哈
11 |
嘻嘻嘻
12 |
恩恩嗯
13 |
14 |
3 |
SelectView - {{ value }}
4 |
3 |
4 |
10 |
{{ item.value }}
11 |
29 |
30 |
31 |
3 |
6 |
7 |
8 |
9 |
10 |
哈哈哈
11 |
嘻嘻嘻
12 |
恩恩嗯
13 |
14 |
3 |
4 |
5 |
11 |
{{ item.value }}
12 |
13 |
14 |
3 |
9 | {{ column.title }}
10 |
11 |
12 |
39 |
40 |
--------------------------------------------------------------------------------
/src/table/header/cell/HeaderIndexCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ column.title }}
4 |
5 |
6 |
12 |
13 |
--------------------------------------------------------------------------------
/src/table/header/cell/HeaderOrderCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ column.title }}
4 |
5 |
6 |
12 |
13 |
--------------------------------------------------------------------------------
/src/table/header/cell/HeaderTextCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | {{ column.title }}
7 |
8 |
9 |
22 |
--------------------------------------------------------------------------------
/src/table/row/ExpandRow.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | |
4 |
5 |
6 |
7 | |
8 |
9 |
10 |
37 |
--------------------------------------------------------------------------------
/src/table/row/GroupRow.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
27 |
28 | 分组-{{ props.row.name }}
29 | |
31 |
32 |
33 |
61 |
--------------------------------------------------------------------------------
/src/template/GridTable.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
121 |
122 |
--------------------------------------------------------------------------------
/src/template/GridTableColumn.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ field }}
3 |
4 |
15 |
20 |
21 |
--------------------------------------------------------------------------------
/src/utils/getCellFromEvent.ts:
--------------------------------------------------------------------------------
1 | export const getCellFromEvent = (e: MouseEvent) => {
2 | const cellRoot = e
3 | .composedPath()
4 | .find(
5 | (v) =>
6 | !(v as HTMLElement).classList?.contains('vtg-cell--unselectable') &&
7 | (v as HTMLElement).dataset?.colidx &&
8 | (v as HTMLElement).dataset?.rowidx,
9 | ) as HTMLElement;
10 |
11 | if (cellRoot && cellRoot.dataset) {
12 | const { colidx, rowidx, colspan, rowspan } = cellRoot.dataset;
13 | return {
14 | rowIndex: +(rowidx || 0),
15 | colIndex: +(colidx || 0),
16 | rowspan: +(rowspan || 1),
17 | colspan: +(colspan || 1),
18 | };
19 | }
20 |
21 | return undefined;
22 | };
23 |
--------------------------------------------------------------------------------
/src/utils/merge.ts:
--------------------------------------------------------------------------------
1 | import { type MergeCell } from '@/src/type';
2 |
3 | export function isInMergeCell(mergeInfo: MergeCell, rowIndex: number, colIndex: number) {
4 | return (
5 | mergeInfo.rowIndex <= rowIndex &&
6 | mergeInfo.rowIndex + mergeInfo.rowspan - 1 >= rowIndex &&
7 | mergeInfo.colIndex <= colIndex &&
8 | mergeInfo.colIndex + mergeInfo.colspan - 1 >= colIndex
9 | );
10 | }
11 |
12 | export const mergeMethods = (
13 | rowIndex: number,
14 | colIndex: number,
15 | ): {
16 | rowIndex: number;
17 | colIndex: number;
18 | rowspan: number;
19 | colspan: number;
20 | } | null => {
21 | if (colIndex === 0) {
22 | if (rowIndex % 2 === 0) {
23 | return {
24 | rowIndex: rowIndex,
25 | colIndex: colIndex,
26 | rowspan: 2,
27 | colspan: 1,
28 | };
29 | } else {
30 | return {
31 | rowIndex: rowIndex - 1,
32 | colIndex: colIndex,
33 | // rowspan: 2,
34 | // colspan: 1,
35 | rowspan: 0,
36 | colspan: 0,
37 | };
38 | }
39 | }
40 | if (colIndex === 1) {
41 | if (rowIndex % 2 === 1) {
42 | return {
43 | rowIndex: rowIndex,
44 | colIndex: colIndex,
45 | rowspan: 2,
46 | colspan: 1,
47 | };
48 | } else if (rowIndex > 0) {
49 | return {
50 | rowIndex: rowIndex - 1,
51 | colIndex: colIndex,
52 | rowspan: 2,
53 | colspan: 1,
54 | };
55 | }
56 | }
57 | return null;
58 | };
59 |
60 | export function getMergeInfo(
61 | merges: MergeCell[],
62 | rowIndex: number,
63 | colIndex: number,
64 | ): MergeCell | null {
65 | // 测试methods
66 | // return mergeMethods(rowIndex, colIndex);
67 | for (let i = 0; i < merges.length; i += 1) {
68 | if (isInMergeCell(merges[i], rowIndex, colIndex)) {
69 | return merges[i];
70 | }
71 | }
72 | return null;
73 | }
74 |
75 | /**
76 | * @description
77 | * calcRenderRect计算实际渲染的区域和边界并收集合并单元格信息
78 | * 该函数会在render之前被调用，以便计算实际渲染的区域和边界合并单元格
79 | * 该函数返回的是一个对象，包含了渲染的区域和边界合并单元格
80 | * @param merges {MergeCell[]} - 合并单元格的信息
81 | * @param originRect {Object} - 可视区域的信息
82 | * @return {
83 | * renderRect: { ys: number; ye: number; xs: number; xe: number },
84 | * merges: { topMerges: MergeCell[], leftMerges: MergeCell[], rightMerges: MergeCell[], bottomMerges: MergeCell[] }
85 | * } - 一个对象，包含了渲染的区域和边界合并单元格
86 | */
87 | export function calcRenderRect(
88 | merges: MergeCell[],
89 | originRect: { ys: number; ye: number; xs: number; xe: number },
90 | ) {
91 | const topMerges: MergeCell[] = [];
92 | const leftMerges: MergeCell[] = [];
93 | const rightMerges: MergeCell[] = [];
94 | const bottomMerges: MergeCell[] = [];
95 | const { ys: oys, ye: oye, xs: oxs, xe: oxe } = originRect;
96 | let rys = originRect.ys;
97 | let rye = originRect.ye;
98 | let rxs = originRect.xs;
99 | let rxe = originRect.xe;
100 |
101 | for (let y = oys; y <= oye; y++) {
102 | for (let x = oxs; x <= oxe; x++) {
103 | // 如果是第一行，那么可以算出rys
104 | if (y === oys) {
105 | const mergeInfo = getMergeInfo(merges, y, x);
106 | // console.warn('第一行', y, x, mergeInfo);
107 | if (mergeInfo) {
108 | const { rowIndex, colIndex, colspan } = mergeInfo;
109 | rys = Math.min(rys, rowIndex);
110 | rxs = Math.min(rxs, colIndex);
111 | rxe = Math.max(rxe, colIndex + colspan - 1);
112 | // 只有被上面的行合并的单元格才需要加进来
113 | if (y > rowIndex) {
114 | topMerges.push(mergeInfo);
115 | }
116 | }
117 | }
118 |
119 | // 左边列，不包含第一行和最后一行
120 | if (x === oxs) {
121 | const mergeInfo = getMergeInfo(merges, y, x);
122 | // console.warn('左边列', y, x, mergeInfo);
123 | if (mergeInfo) {
124 | const { colIndex } = mergeInfo;
125 | rxs = Math.min(rxs, colIndex);
126 | // 只有被左边的列合并的单元格才需要加进来
127 | if (x > colIndex) {
128 | leftMerges.push(mergeInfo);
129 | }
130 | }
131 | }
132 |
133 | // 右边列，不包含第一行和最后一行
134 | if (x === oxe) {
135 | const mergeInfo = getMergeInfo(merges, y, x);
136 | // console.warn('右边列', y, x, mergeInfo);
137 | if (mergeInfo) {
138 | const { colIndex, colspan } = mergeInfo;
139 | rxe = Math.max(rxe, colIndex + colspan - 1);
140 | // 只要是有合并信息的都加进去
141 | rightMerges.push(mergeInfo);
142 | }
143 | }
144 |
145 | // 如果是最后一行，那么可以算出rye
146 | if (y === oye) {
147 | const mergeInfo = getMergeInfo(merges, y, x);
148 | if (mergeInfo) {
149 | // 只要是有合并信息的都加进去
150 | const { rowIndex, rowspan } = mergeInfo;
151 | rye = Math.max(rye, rowIndex + rowspan - 1);
152 | bottomMerges.push(mergeInfo);
153 | }
154 | }
155 | }
156 | }
157 |
158 | return {
159 | renderRect: { ys: rys, ye: rye, xs: rxs, xe: rxe },
160 | merges: {
161 | topMerges,
162 | leftMerges,
163 | rightMerges,
164 | bottomMerges,
165 | },
166 | };
167 | }
168 |
--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
1 | # todo
2 |
3 | ## done
4 |
5 | - [x] 表头
6 |
7 | ## to-do
8 |
9 | - [ ] 表头合并单元格bug处理
10 |
11 | - [ ] 表格蒙层，全局处理单元格交互，非单元格内部处理，提升性能
12 |
13 | - [ ] 各类单元格
14 | - [ ] select(单元/多选)
15 | - [ ] 日期
16 | - [ ] 人员
17 | - [ ] checkbox
18 |
19 | ## bugfix
20 |
21 | - 高亮
22 |
23 | - 高亮列有bug
24 | - 高亮选中行列(highlight-select-row/col)和高亮hover行(highlight-hover-row/col)要分开
25 |
26 | - 列宽拖拽鼠标样式要改成拖拽
27 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.dom.json",
3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "docs/**/*", "docs/**/*.vue"],
4 | "exclude": ["src/**/__tests__/*", "example/**/__tests__/*"],
5 | "compilerOptions": {
6 | "baseUrl": ".",
7 | "jsx": "preserve",
8 | "composite": true,
9 | "types": ["node"],
10 | "paths": {
11 | "vue-virt-grid": ["./src"],
12 | "@/src/*": ["./src/*"]
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.app.json",
3 | "exclude": ["docs/**/*"],
4 | "compilerOptions": {
5 | "emitDeclarationOnly": true, // 只输出声明文件(ts 产物)
6 | "declaration": true, // 自动生成声明文件
7 | "outDir": "lib",
8 | "rootDir": "./src",
9 | "jsx": "preserve",
10 | "jsxFactory": "h"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | {
5 | "path": "./tsconfig.app.json"
6 | },
7 | {
8 | "path": "./tsconfig.node.json"
9 | },
10 | {
11 | "path": "./tsconfig.vitest.json"
12 | }
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/node18/tsconfig.json",
3 | "include": [
4 | "vite.config.*",
5 | "vitest.config.*",
6 | "cypress.config.*",
7 | "nightwatch.conf.*",
8 | "playwright.config.*"
9 | ],
10 | "compilerOptions": {
11 | "composite": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Bundler",
14 | "types": ["node"]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/tsconfig.vitest.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.app.json",
3 | "exclude": [],
4 | "compilerOptions": {
5 | "composite": true,
6 | "lib": [],
7 | "types": ["node", "jsdom"]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath } from 'node:url';
2 | import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
3 | import viteConfig from './scripts/dev';
4 |
5 | export default mergeConfig(
6 | viteConfig,
7 | defineConfig({
8 | test: {
9 | environment: 'jsdom',
10 | exclude: [...configDefaults.exclude, 'e2e/*'],
11 | root: fileURLToPath(new URL('./', import.meta.url)),
12 | },
13 | }),
14 | );
15 |
--------------------------------------------------------------------------------