fix: column[align] should not override custom cell style #973 (#983)

Author: sendya

components/table/__tests__/Table.test.js

@@ -5,22 +5,22 @@ import Vue from 'vue';
 const { Column, ColumnGroup } = Table;
 
 describe('Table', () => {
-  it('renders JSX correctly', done => {
-    const data = [
-      {
-        key: '1',
-        firstName: 'John',
-        lastName: 'Brown',
-        age: 32,
-      },
-      {
-        key: '2',
-        firstName: 'Jim',
-        lastName: 'Green',
-        age: 42,
-      },
-    ];
+  const data = [
+    {
+      key: '1',
+      firstName: 'John',
+      lastName: 'Brown',
+      age: 32,
+    },
+    {
+      key: '2',
+      firstName: 'Jim',
+      lastName: 'Green',
+      age: 42,
+    },
+  ];
 
+  it('renders JSX correctly', done => {
     const wrapper = mount(
       {
         render() {
@@ -96,4 +96,34 @@ describe('Table', () => {
       done();
     });
   });
+
+  it('align column should not override cell style', () => {
+    const columns = [
+      { title: 'Name', dataIndex: 'name', key: 'name' },
+      {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+        align: 'center',
+        customCell: (record, rowIndex) => {
+          return {
+            style: {
+              color: 'red',
+            },
+          };
+        },
+      },
+    ];
+    const wrapper = mount(Table, {
+      propsData: {
+        columns,
+        dataSource: data,
+      },
+      sync: false,
+    });
+    Vue.nextTick(() => {
+      expect(wrapper.html()).toMatchSnapshot();
+      done();
+    });
+  });
 });

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

@@ -1,5 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Table align column should not override cell style 1`] = `
+<div class="ant-table-wrapper">
+  <div class="ant-spin-nested-loading">
+    <div class="ant-spin-container">
+      <div class="ant-table ant-table-scroll-position-left ant-table-default">
+        <div class="ant-table-content">
+          <!---->
+          <div class="ant-table-body">
+            <table class="">
+              <colgroup>
+                <col>
+                <col>
+              </colgroup>
+              <thead class="ant-table-thead">
+                <tr>
+                  <th key="name" class="">
+                    <div>Name</div>
+                  </th>
+                  <th key="age" class="ant-table-align-center" style="text-align: center;">
+                    <div>Age</div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="ant-table-tbody">
+                <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
+                  <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+                    <!---->
+                  </td>
+                  <td style="color: red; text-align: center;">32</td>
+                </tr>
+                <tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
+                  <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+                    <!---->
+                  </td>
+                  <td style="color: red; text-align: center;">42</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+        <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+                <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 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></i></a></li>
+        <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a>1</a></li>
+        <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 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 0 0 0-50.4z"></path>
+              </svg></i></a></li>
+        <!---->
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Table renders JSX correctly 1`] = `
 <div class="ant-table-wrapper">
   <div class="ant-spin-nested-loading">

components/vc-table/src/TableCell.jsx

@@ -97,7 +97,7 @@ export default {
       return null;
     }
     if (column.align) {
-      tdProps.style = { textAlign: column.align };
+      tdProps.style = { ...tdProps.style, textAlign: column.align };
     }
 
     return (