fix: support staticClass and dynamic class #371

Author: tangjinzhou

components/_util/props-util.js

@@ -180,14 +180,16 @@ export function getClass (ele) {
   } else if (ele.$vnode && ele.$vnode.data) {
     data = ele.$vnode.data
   }
-  const tempCls = data.class || data.staticClass
+  const tempCls = data.class || {}
+  const staticClass = data.staticClass
   let cls = {}
+  staticClass && staticClass.split(' ').forEach(c => { cls[c.trim()] = true })
   if (typeof tempCls === 'string') {
     tempCls.split(' ').forEach(c => { cls[c.trim()] = true })
   } else if (Array.isArray(tempCls)) {
     classNames(tempCls).split(' ').forEach(c => { cls[c.trim()] = true })
   } else {
-    cls = tempCls
+    cls = { ...cls, ...tempCls }
   }
   return cls
 }

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

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table renders JSX correctly 1`] = `
-<div class="ant-table-wrapper"><span tag="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><col></colgroup><thead class="ant-table-thead"><tr><th key="0" colspan="2" class=""><div>Name</div></th><th key="age" rowspan="2" class=""><div>Age</div></th></tr><tr><th key="firstName" class=""><div>First Name</div></th><th key="lastName" class=""><div>Last Name</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>
+<div class="ant-table-wrapper"><span tag="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><col></colgroup><thead class="ant-table-thead"><tr><th key="0" colspan="2" class=""><div>Name</div></th><th key="age" rowspan="2" class=""><div>Age</div></th></tr><tr><th key="firstName" class=""><div>First Name</div></th><th key="lastName" class=""><div>Last Name</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
   <!---->John</td>
-  <td>Brown</td>
-  <td>32</td>
+  <td class="">Brown</td>
+  <td class="">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 class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
       <!---->Jim</td>
-    <td>Green</td>
-    <td>42</td>
+    <td class="">Green</td>
+    <td class="">42</td>
   </tr>
   </tbody>
   </table>

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

@@ -2896,31 +2896,31 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
               </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 class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
                     <!---->John</td>
-                  <td>Brown</td>
-                  <td>32</td>
-                  <td>New York No. 1 Lake Park</td>
-                  <td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
-                  <td><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
+                  <td class="">Brown</td>
+                  <td class="">32</td>
+                  <td class="">New York No. 1 Lake Park</td>
+                  <td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
+                  <td class=""><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></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 class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
                     <!---->Jim</td>
-                  <td>Green</td>
-                  <td>42</td>
-                  <td>London No. 1 Lake Park</td>
-                  <td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
-                  <td><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
+                  <td class="">Green</td>
+                  <td class="">42</td>
+                  <td class="">London No. 1 Lake Park</td>
+                  <td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
+                  <td class=""><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
                 </tr>
                 <tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
-                  <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+                  <td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
                     <!---->Joe</td>
-                  <td>Black</td>
-                  <td>32</td>
-                  <td>Sidney No. 1 Lake Park</td>
-                  <td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
-                  <td><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
+                  <td class="">Black</td>
+                  <td class="">32</td>
+                  <td class="">Sidney No. 1 Lake Park</td>
+                  <td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
+                  <td class=""><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
                 </tr>
               </tbody>
             </table>