Skip to content

Commit 62428b6

Browse files
zkwolfzkwolf
authored
fix(table): responsive invalid (#5172)
* fix(table): reponsive invalid #5171 * docs(table): add reponsive demo
1 parent 26f1b98 commit 62428b6

File tree

4 files changed

+123
-2
lines changed

4 files changed

+123
-2
lines changed

‎components/table/Table.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -262,8 +262,9 @@ const InteralTable = defineComponent<
262262
const screens = useBreakpoint();
263263

264264
const mergedColumns = computed(() => {
265-
const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
266-
265+
const matched = new Set(
266+
Object.keys(screens.value).filter((m: Breakpoint) => screens.value[m]),
267+
);
267268
return props.columns.filter(
268269
(c: ColumnType<DefaultRecordType>) =>
269270
!c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),

‎components/table/__tests__/__snapshots__/demo.test.js.snap

+47
Original file line numberDiff line numberDiff line change
@@ -4160,6 +4160,53 @@ exports[`renders ./components/table/demo/resizable-column.vue correctly 1`] = `
41604160
</div>
41614161
`;
41624162

4163+
exports[`renders ./components/table/demo/responsive.vue correctly 1`] = `
4164+
<div class="ant-table-wrapper">
4165+
<div class="ant-spin-nested-loading">
4166+
<!---->
4167+
<div class="ant-spin-container">
4168+
<div class="ant-table">
4169+
<!---->
4170+
<div class="ant-table-container">
4171+
<div class="ant-table-content">
4172+
<table style="table-layout: auto;">
4173+
<colgroup></colgroup>
4174+
<thead class="ant-table-thead">
4175+
<tr>
4176+
<th class="ant-table-cell" colstart="0" colend="0">
4177+
<!---->Name (all screens)
4178+
<!---->
4179+
</th>
4180+
</tr>
4181+
</thead>
4182+
<tbody class="ant-table-tbody">
4183+
<!---->
4184+
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
4185+
<td class="ant-table-cell">
4186+
<!----><a>John Brown</a>
4187+
<!---->
4188+
</td>
4189+
</tr>
4190+
<!---->
4191+
</tbody>
4192+
<!---->
4193+
</table>
4194+
</div>
4195+
</div>
4196+
<!---->
4197+
</div>
4198+
<ul unselectable="on" class="ant-pagination ant-table-pagination ant-table-pagination-right">
4199+
<!---->
4200+
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
4201+
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
4202+
<li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
4203+
<!---->
4204+
</ul>
4205+
</div>
4206+
</div>
4207+
</div>
4208+
`;
4209+
41634210
exports[`renders ./components/table/demo/row-selection.vue correctly 1`] = `
41644211
<div class="ant-table-wrapper">
41654212
<div class="ant-spin-nested-loading">

‎components/table/demo/index.vue

+3
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<Size />
2727
<Stripe />
2828
<Summary />
29+
<Responsive />
2930
<TemplateCom />
3031
<bigData />
3132
</demo-sort>
@@ -61,6 +62,7 @@ import Summary from './summary.vue';
6162
import Sticky from './sticky.vue';
6263
import ResizableColumn from './resizable-column.vue';
6364
import bigData from './big-data.vue';
65+
import Responsive from './responsive.vue';
6466
import CN from '../index.zh-CN.md';
6567
import US from '../index.en-US.md';
6668
import { defineComponent } from 'vue';
@@ -97,6 +99,7 @@ export default defineComponent({
9799
Sticky,
98100
ResizableColumn,
99101
bigData,
102+
Responsive,
100103
},
101104
});
102105
</script>

‎components/table/demo/responsive.vue

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<docs>
2+
---
3+
order: 30
4+
title:
5+
en-US: Responsive
6+
zh-CN: 响应式
7+
---
8+
9+
## zh-CN
10+
11+
响应式配置列的展示。
12+
13+
## en-US
14+
15+
Responsive columns.
16+
</docs>
17+
18+
<template>
19+
<a-table :columns="columns" :row-key="record => record.key" :data-source="data">
20+
<template #bodyCell="{ column, record }">
21+
<template v-if="column.key === 'name'">
22+
<a>
23+
{{ record.name }}
24+
</a>
25+
</template>
26+
</template>
27+
</a-table>
28+
</template>
29+
<script lang="ts">
30+
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
31+
import { defineComponent } from 'vue';
32+
33+
const columns: ColumnsType = [
34+
{
35+
title: 'Name (all screens)',
36+
dataIndex: 'name',
37+
key: 'name',
38+
},
39+
{
40+
title: 'Age (medium screen or bigger)',
41+
dataIndex: 'age',
42+
key: 'age',
43+
responsive: ['md'],
44+
},
45+
{
46+
title: 'Address (large screen or bigger)',
47+
dataIndex: 'address',
48+
key: 'address',
49+
responsive: ['lg'],
50+
},
51+
];
52+
53+
const data = [
54+
{
55+
key: '1',
56+
name: 'John Brown',
57+
age: 32,
58+
address: 'New York No. 1 Lake Park',
59+
},
60+
];
61+
62+
export default defineComponent({
63+
setup() {
64+
return {
65+
data,
66+
columns,
67+
};
68+
},
69+
});
70+
</script>

0 commit comments

Comments
 (0)