From 62428b6df3e84b02a66c3d329c1c9c4bee411998 Mon Sep 17 00:00:00 2001
From: zkwolf <chenhao5866@gmail.com>
Date: Mon, 17 Jan 2022 10:47:04 +0800
Subject: [PATCH] fix(table): responsive invalid (#5172)

* fix(table): reponsive invalid #5171

* docs(table): add reponsive demo
---
 components/table/Table.tsx                    |  5 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 47 +++++++++++++
 components/table/demo/index.vue               |  3 +
 components/table/demo/responsive.vue          | 70 +++++++++++++++++++
 4 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 components/table/demo/responsive.vue

diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 8921a8494..4619d5472 100644
--- a/components/table/Table.tsx
+++ b/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)),
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 2fd191d93..ef7da1e35 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/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">
diff --git a/components/table/demo/index.vue b/components/table/demo/index.vue
index 6947b1613..c72af87ae 100644
--- a/components/table/demo/index.vue
+++ b/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>
diff --git a/components/table/demo/responsive.vue b/components/table/demo/responsive.vue
new file mode 100644
index 000000000..240e9b538
--- /dev/null
+++ b/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>