Skip to content

Commit 6348eb5

Browse files
xingyan95CoderTongxin
xingyan95
and
CoderTongxin
authored
优化组件 (#1829)
* fix(EditableSelect): 移除下拉菜单的上下边距 * feat(Select): 优化loading效果 * fix(Table): 列宽总和不再应用到table上 * feat(EditorMd): 补充文档 * feat(DataGrid): 支持列不启用虚拟滚动 --------- Co-authored-by: TongxinXie <gin199413@163.com>
1 parent 74132f4 commit 6348eb5

File tree

10 files changed

+372
-364
lines changed

10 files changed

+372
-364
lines changed

‎packages/devui-vue/devui/data-grid/src/components/grid-th.tsx

Lines changed: 66 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -8,71 +8,72 @@ import type { GridThProps, DataGridContext } from '../data-grid-types';
88
import { useGridThSort, useGridThFilter, useGridThDrag } from '../composables/use-grid-th';
99

1010
export default defineComponent({
11-
name: 'GridTh',
12-
props: gridThProps,
13-
setup(props: GridThProps) {
14-
const ns = useNamespace('data-grid');
15-
const { size, allChecked, halfAllChecked, virtualScroll, resizable, addGridThContextToMap, toggleAllRowChecked } = inject(
16-
DataGridInjectionKey
17-
) as DataGridContext;
18-
const { columnConfig, mouseenterCb, mouseleaveCb } = toRefs(props);
19-
const { direction, doSort, onSortClick, doClearSort } = useGridThSort(columnConfig);
20-
const { filterActive, setFilterStatus, onFilterChange } = useGridThFilter(columnConfig);
21-
const classes = computed(() => ({
22-
[ns.e('th')]: true,
23-
[ns.m(columnConfig.value.align)]: true,
24-
[ns.e('sticky-th')]: true,
25-
[ns.em('th', size.value)]: true,
26-
[ns.em('th', 'filter-active')]: filterActive.value,
27-
[ns.em('th', 'sort-active')]: Boolean(direction.value),
28-
[ns.em('th', 'operable')]:
29-
columnConfig.value.filterable ||
30-
columnConfig.value.sortable ||
31-
(!virtualScroll.value && (columnConfig.value.resizable ?? resizable.value)),
32-
}));
33-
const { thRef, onMousedown } = useGridThDrag(columnConfig);
11+
name: 'GridTh',
12+
props: gridThProps,
13+
setup(props: GridThProps) {
14+
const ns = useNamespace('data-grid');
15+
const { size, allChecked, halfAllChecked, virtualScroll, columnVirtualScroll, resizable, addGridThContextToMap, toggleAllRowChecked } =
16+
inject(DataGridInjectionKey) as DataGridContext;
17+
const { columnConfig, mouseenterCb, mouseleaveCb } = toRefs(props);
18+
const { direction, doSort, onSortClick, doClearSort } = useGridThSort(columnConfig);
19+
const { filterActive, setFilterStatus, onFilterChange } = useGridThFilter(columnConfig);
20+
const classes = computed(() => ({
21+
[ns.e('th')]: true,
22+
[ns.m(columnConfig.value.align)]: true,
23+
[ns.e('sticky-th')]: true,
24+
[ns.em('th', size.value)]: true,
25+
[ns.em('th', 'filter-active')]: filterActive.value,
26+
[ns.em('th', 'sort-active')]: Boolean(direction.value),
27+
[ns.em('th', 'operable')]:
28+
columnConfig.value.filterable ||
29+
columnConfig.value.sortable ||
30+
(!(columnVirtualScroll.value ?? virtualScroll.value) && (columnConfig.value.resizable ?? resizable.value)),
31+
}));
32+
const { thRef, onMousedown } = useGridThDrag(columnConfig);
3433

35-
if (columnConfig.value.sortable) {
36-
addGridThContextToMap(columnConfig.value.field, { doSort, doClearSort });
37-
}
34+
if (columnConfig.value.sortable) {
35+
addGridThContextToMap(columnConfig.value.field, { doSort, doClearSort });
36+
}
3837

39-
const cellTypeMap = {
40-
checkable: () => <Checkbox modelValue={allChecked.value} halfChecked={halfAllChecked.value} onChange={toggleAllRowChecked} />,
41-
index: () => <span class={ns.em('th', 'index')}>#</span>,
42-
default: () => <span class='th-title'>{columnConfig.value.header}</span>,
43-
};
38+
const cellTypeMap = {
39+
checkable: () => <Checkbox modelValue={allChecked.value} halfChecked={halfAllChecked.value} onChange={toggleAllRowChecked} />,
40+
index: () => <span class={ns.em('th', 'index')}>#</span>,
41+
default: () => <span class="th-title">{columnConfig.value.header}</span>,
42+
};
4443

45-
return () => (
46-
<div
47-
ref={thRef}
48-
class={classes.value}
49-
style={{ width: columnConfig.value.width + 'px' }}
50-
onMousedown={onMousedown}
51-
onMouseenter={(e) => mouseenterCb.value(e, columnConfig.value.showHeadOverflowTooltip)}
52-
onMouseleave={(e) => mouseleaveCb.value(e, columnConfig.value.showHeadOverflowTooltip)}>
53-
{columnConfig.value.headRender ? (
54-
<span class='th-title'>{columnConfig.value.headRender(columnConfig.value)}</span>
55-
) : (
56-
cellTypeMap[columnConfig.value.type || 'default']()
57-
)}
58-
{columnConfig.value.sortable && (
59-
<SortIcon
60-
class={['th-sort-icon', direction.value, { 'th-sort-default-visible': columnConfig.value.showSortIcon }]}
61-
onClick={onSortClick}
62-
/>
63-
)}
64-
{columnConfig.value.filterable && (
65-
<GridThFilter
66-
filterList={columnConfig.value.filterList}
67-
multiple={columnConfig.value.filterMultiple}
68-
showFilterIcon={columnConfig.value.showFilterIcon}
69-
filterMenu={columnConfig.value.filterMenu}
70-
setFilterStatus={setFilterStatus}
71-
onFilterChange={onFilterChange}
72-
/>
73-
)}
74-
{!virtualScroll.value && (columnConfig.value.resizable ?? resizable.value) && <span class='resize-handle'></span>}
75-
</div>
76-
);
77-
},
78-
});
44+
return () => (
45+
<div
46+
ref={thRef}
47+
class={classes.value}
48+
style={{ width: columnConfig.value.width + 'px' }}
49+
onMousedown={onMousedown}
50+
onMouseenter={(e) => mouseenterCb.value(e, columnConfig.value.showHeadOverflowTooltip)}
51+
onMouseleave={(e) => mouseleaveCb.value(e, columnConfig.value.showHeadOverflowTooltip)}>
52+
{columnConfig.value.headRender ? (
53+
<span class="th-title">{columnConfig.value.headRender(columnConfig.value)}</span>
54+
) : (
55+
cellTypeMap[columnConfig.value.type || 'default']()
56+
)}
57+
{columnConfig.value.sortable && (
58+
<SortIcon
59+
class={['th-sort-icon', direction.value, { 'th-sort-default-visible': columnConfig.value.showSortIcon }]}
60+
onClick={onSortClick}
61+
/>
62+
)}
63+
{columnConfig.value.filterable && (
64+
<GridThFilter
65+
filterList={columnConfig.value.filterList}
66+
multiple={columnConfig.value.filterMultiple}
67+
showFilterIcon={columnConfig.value.showFilterIcon}
68+
filterMenu={columnConfig.value.filterMenu}
69+
setFilterStatus={setFilterStatus}
70+
onFilterChange={onFilterChange}
71+
/>
72+
)}
73+
{!(columnVirtualScroll.value ?? virtualScroll.value) && (columnConfig.value.resizable ?? resizable.value) && (
74+
<span class="resize-handle"></span>
75+
)}
76+
</div>
77+
);
78+
},
79+
});

‎packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ColumnType, RowHeightMap } from '../const';
1010
import { calcEachColumnWidth } from '../utils';
1111

1212
export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
13-
const { data, columns, size, virtualScroll } = toRefs(props);
13+
const { data, columns, size, virtualScroll, columnVirtualScroll } = toRefs(props);
1414
const scrollRef = ref<HTMLElement>();
1515
const headBoxRef = ref<HTMLElement>();
1616
const bodyContentWidth = ref(0);
@@ -125,7 +125,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
125125
}
126126
bodyTotalWidth += itemColumn.width as number;
127127
}
128-
if (!virtualScroll.value) {
128+
if (!(columnVirtualScroll.value ?? virtualScroll.value)) {
129129
renderColumnData.value = scrollXParams.originColumnData;
130130
translateX.value = renderColumnData.value[0]?.offsetLeft ?? 0;
131131
}
@@ -185,7 +185,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
185185
let distance = 0;
186186
nextTick(() => {
187187
initOriginColumnData();
188-
if (virtualScroll.value && scrollRef.value) {
188+
if ((columnVirtualScroll.value ?? virtualScroll.value) && scrollRef.value) {
189189
distance = scrollRef.value.scrollLeft;
190190
initVirtualColumnData(distance, scrollRef.value.clientWidth);
191191
}
@@ -207,7 +207,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
207207
watch(
208208
virtualColumnData,
209209
(val: InnerColumnConfig[]) => {
210-
if (virtualScroll.value) {
210+
if (columnVirtualScroll.value ?? virtualScroll.value) {
211211
renderColumnData.value = val;
212212
}
213213
},
@@ -231,7 +231,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
231231
return;
232232
}
233233
scrollXParams.distance = scrollLeft;
234-
virtualScroll.value && calcVirtualColumnData(scrollXParams);
234+
(columnVirtualScroll.value ?? virtualScroll.value) && calcVirtualColumnData(scrollXParams);
235235
} else if (scrollTop !== scrollYParams.distance) {
236236
if (scrollYParams.originRowData.length === 0) {
237237
return;
@@ -249,7 +249,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
249249
let distance = 0;
250250
initOriginColumnData();
251251
distance = scrollRef.value!.scrollLeft;
252-
virtualScroll.value && initVirtualColumnData(distance, scrollRef.value!.clientWidth);
252+
(columnVirtualScroll.value ?? virtualScroll.value) && initVirtualColumnData(distance, scrollRef.value!.clientWidth);
253253
}
254254
});
255255
resizeObserver.observe(scrollRef.value);

0 commit comments

Comments
 (0)