feat(table): add prop attrs

Closes #186

doc/components/component/table.vue

@@ -45,7 +45,7 @@
     <h3>Table 气泡提示以及自定义行列样式</h3>
     <example demo="view/table7"></example>
 
-    <h3>自定义表头</h3>
+    <h3>自定义表头，合并行/列</h3>
     <example demo="view/table8"></example>
 
     <h3>Table 参数</h3>
@@ -127,6 +127,13 @@
         <td></td>
         <td></td>
       </tr>
+      <tr>
+        <td>attrs</td>
+        <td>计算 td 的属性, 1.25.0+</td>
+        <td>Function(data, index)</td>
+        <td></td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TableItem / Column 参数</h3>

doc/components/demos/view/table8.vue

@@ -1,44 +1,60 @@
 <template>
   <div>
-    <Table border :datas="datas" :columns="columns" :ths="ths" :height="200">
-      <div slot="empty">自定义提醒：暂时无数据</div>
+    <Table border :datas="datas" :columns="columns" :ths="ths">
     </Table>
   </div>
 </template>
 
 <script>
 export default {
   data() {
+    let attrs = (data, index) => {
+      return {
+        colspan: index == 5 ? 0 : 1
+      };
+    };
     return {
       ths: [
         [
-          { title: '序号', rowspan: 2 },
-          { title: '编码', tooltip: true },
-          { title: '信息', colspan: 2 },
+          { title: 'serial', rowspan: 2 },
+          { title: 'coding', tooltip: true },
+          { title: 'information', colspan: 2 },
           { title: 'address', rowspan: 2 }
-        ], [
+        ],
+        [
           { title: 'ID', prop: 'id', sort: 'auto' },
-          { title: '姓名' },
-          { title: '年龄' }
+          { title: 'Name' },
+          { title: 'age' }
         ]
       ],
       columns: [
-        { prop: 'index', width: 100 },
-        { prop: 'id', width: 100 },
-        { prop: 'name', width: 100 },
-        { prop: 'age', width: 100 },
-        { prop: 'address', width: 150 }
+        { prop: 'index',
+          width: 100,
+          attrs(data, index) {
+            return {
+              colspan: index == 5 ? 5 : 1
+            };
+          } },
+        { prop: 'id',
+          width: 100,
+          attrs(data, index) {
+            return {
+              rowspan: index < 4 ? (index % 2 == 0 ? 2 : 0) : 1,
+              colspan: index == 5 ? 0 : 1
+            };
+          } },
+        { prop: 'name', width: 100, attrs },
+        { prop: 'age', width: 100, attrs },
+        { prop: 'address', width: 150, attrs }
       ],
       datas: [
-        { index: 1, id: 'abc1', name: '测试1', age: 1, address: '上海1', address2: '上海21' },
-        { index: 2, id: 'abc2', name: '测试2', age: 2, address: '上海2', address2: '上海22' },
-        { index: 3, id: 'abc3', name: '测试3', age: 3, address: '上海3', address2: '上海23' },
-        { index: 4, id: 'abc4', name: '测试4', age: 4, address: '上海4', address2: '上海24' },
-        { index: 5, id: 'abc5', name: '测试5', age: 5, address: '上海5', address2: '上海25' },
-        { index: 6, id: 'abc6', name: '测试6', age: 6, address: '上海6', address2: '上海26' },
-        { index: 7, id: 'abc7', name: '测试7', age: 7, address: '上海7', address2: '上海27' },
-        { index: 8, id: 'abc8', name: '测试8', age: 8, address: '上海8', address2: '上海28' },
-        { index: 9, id: 'abc9', name: '测试9', age: 9, address: '上海9', address2: '上海29' }
+        { index: 1, id: 'abc1', name: 'Test 1', age: 1, address: 'Shanghai 1', address2: 'Shanghai 21' },
+        { index: 2, id: 'abc2', name: 'Test 2', age: 2, address: 'Shanghai 2', address2: 'Shanghai 22' },
+        { index: 3, id: 'abc3', name: 'Test 3', age: 3, address: 'Shanghai 3', address2: 'Shanghai 23' },
+        { index: 4, id: 'abc4', name: 'Test 4', age: 4, address: 'Shanghai 4', address2: 'Shanghai 24' },
+        { index: 5, id: 'abc5', name: 'Test 5', age: 5, address: 'Shanghai 5', address2: 'Shanghai 25' },
+        { index: 6, id: 'abc6', name: 'Test 6', age: 6, address: 'Shanghai 6', address2: 'Shanghai 26' },
+        { index: 7, id: 'abc7', name: 'Test 7', age: 7, address: 'Shanghai 7', address2: 'Shanghai 27' }
       ]
     };
   },

doc/components_en/component/table.vue

@@ -48,8 +48,8 @@
     <h3>Table bubble tips and custom style</h3>
     <exampleEn demo="view/table7"></exampleEn>
 
-    <h3>Custom table header</h3>
-    <exampleEn demo="view/table8"></exampleEn>
+    <h3>Custom table header, colspan, rowspan</h3>
+    <example demo="view/table8"></example>
 
     <h3>Table 参数</h3>
     <table class="table">
@@ -137,6 +137,13 @@
         <td></td>
         <td></td>
       </tr>
+      <tr>
+        <td>attrs</td>
+        <td>Computed td attributes,1.25.0+</td>
+        <td>Function(data, index)</td>
+        <td></td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TableItem / Column Property</h3>

src/components/table/tableitem.vue

@@ -13,6 +13,7 @@ export default {
     fixed: String,
     label: String,
     prop: String,
+    attrs: Function,
     dict: String,
     align: String,
     className: String,

src/components/table/tabletd.vue

@@ -1,5 +1,5 @@
 <template>
-  <td :class="cls">
+  <td :class="cls" v-bind="tdAttrs" v-if="tdAttrs.colspan !== 0 && tdAttrs.rowspan !== 0 ">
     <span class="h-table-tree-expand" v-if="treeOpener" :class="{'h-table-tree-opened': data._opened}">
       <i v-for="index of level" :key="index" class="h-table-tree-expand-space"></i>
       <i class="h-table-tree-icon h-icon-angle-right" @click="toggleTree" v-if="data.children && data.children.length"></i>
@@ -19,6 +19,7 @@ export default {
     dict: String,
     data: [Object, Array],
     align: String,
+    attrs: Function,
     unit: String,
     render: Function,
     format: Function,
@@ -34,6 +35,13 @@ export default {
     }
   },
   computed: {
+    tdAttrs() {
+      let attrs = {};
+      if (this.attrs) {
+        attrs = this.attrs.call(null, this.data, this.index);
+      }
+      return attrs;
+    },
     level() {
       return this.data._level || 0;
     },