fix(table): responsive invalid (#5172)

* fix(table): reponsive invalid #5171

* docs(table): add reponsive demo

components/table/Table.tsx

@@ -262,8 +262,9 @@ const InteralTable = defineComponent<
     const screens = useBreakpoint();
 
     const mergedColumns = computed(() => {
-      const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
-
+      const matched = new Set(
+        Object.keys(screens.value).filter((m: Breakpoint) => screens.value[m]),
+      );
       return props.columns.filter(
         (c: ColumnType<DefaultRecordType>) =>
           !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),

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

@@ -4160,6 +4160,53 @@ exports[`renders ./components/table/demo/resizable-column.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/table/demo/responsive.vue correctly 1`] = `
+<div class="ant-table-wrapper">
+  <div class="ant-spin-nested-loading">
+    <!---->
+    <div class="ant-spin-container">
+      <div class="ant-table">
+        <!---->
+        <div class="ant-table-container">
+          <div class="ant-table-content">
+            <table style="table-layout: auto;">
+              <colgroup></colgroup>
+              <thead class="ant-table-thead">
+                <tr>
+                  <th class="ant-table-cell" colstart="0" colend="0">
+                    <!---->Name (all screens)
+                    <!---->
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="ant-table-tbody">
+                <!---->
+                <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
+                  <td class="ant-table-cell">
+                    <!----><a>John Brown</a>
+                    <!---->
+                  </td>
+                </tr>
+                <!---->
+              </tbody>
+              <!---->
+            </table>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <ul unselectable="on" class="ant-pagination ant-table-pagination ant-table-pagination-right">
+        <!---->
+        <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>
+        <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
+        <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>
+        <!---->
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/table/demo/row-selection.vue correctly 1`] = `
 <div class="ant-table-wrapper">
   <div class="ant-spin-nested-loading">

components/table/demo/index.vue

@@ -26,6 +26,7 @@
     <Size />
     <Stripe />
     <Summary />
+    <Responsive />
     <TemplateCom />
     <bigData />
   </demo-sort>
@@ -61,6 +62,7 @@ import Summary from './summary.vue';
 import Sticky from './sticky.vue';
 import ResizableColumn from './resizable-column.vue';
 import bigData from './big-data.vue';
+import Responsive from './responsive.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -97,6 +99,7 @@ export default defineComponent({
     Sticky,
     ResizableColumn,
     bigData,
+    Responsive,
   },
 });
 </script>

components/table/demo/responsive.vue

@@ -0,0 +1,70 @@
+<docs>
+---
+order: 30
+title:
+  en-US: Responsive
+  zh-CN: 响应式
+---
+
+## zh-CN
+
+响应式配置列的展示。
+
+## en-US
+
+Responsive columns.
+</docs>
+
+<template>
+  <a-table :columns="columns" :row-key="record => record.key" :data-source="data">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+        <a>
+          {{ record.name }}
+        </a>
+      </template>
+    </template>
+  </a-table>
+</template>
+<script lang="ts">
+import type { ColumnsType } from 'ant-design-vue/es/table/interface';
+import { defineComponent } from 'vue';
+
+const columns: ColumnsType = [
+  {
+    title: 'Name (all screens)',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Age (medium screen or bigger)',
+    dataIndex: 'age',
+    key: 'age',
+    responsive: ['md'],
+  },
+  {
+    title: 'Address (large screen or bigger)',
+    dataIndex: 'address',
+    key: 'address',
+    responsive: ['lg'],
+  },
+];
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+  },
+];
+
+export default defineComponent({
+  setup() {
+    return {
+      data,
+      columns,
+    };
+  },
+});
+</script>