fix(Table): add column and row style

Add prop className and getTrClass Closes #109
heyui · Apr 28, 2019 · 5e09eb2 · 5e09eb2
1 parent 30e2867
commit 5e09eb2
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 12 deletions.
diff --git a/doc/components/component/data/view/table.vue b/doc/components/component/data/view/table.vue
@@ -43,7 +43,7 @@
     <h3>Table 单选</h3>
     <example demo="view/table10"></example>
 
-    <h3>Table 气泡提示</h3>
+    <h3>Table 气泡提示以及自定义行列样式</h3>
     <example demo="view/table7"></example>
 
     <h3>自定义表头</h3>
@@ -114,6 +114,13 @@
         <td></td>
         <td>false</td>
       </tr>
+      <tr>
+        <td>getTrClass</td>
+        <td>获取行的样式,1.19.2+</td>
+        <td>Function(data, index)</td>
+        <td></td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TableItem / Column 参数</h3>
@@ -217,6 +224,13 @@
         <td></td>
         <td></td>
       </tr>
+      <tr>
+        <td>className</td>
+        <td>自定义列的样式,1.19.2+</td>
+        <td>String</td>
+        <td></td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>Table 事件</h3>

diff --git a/doc/components/demos/view/table7.vue b/doc/components/demos/view/table7.vue
@@ -7,7 +7,7 @@
 
 <template>
   <div>
-    <Table border stripe :datas="datas" :columns="columns">
+    <Table border stripe :datas="datas" :columns="columns" :getTrClass="getTrClass">
       <div slot="empty">自定义提醒：暂时无数据</div>
     </Table>
   </div>
@@ -39,6 +39,7 @@ export default {
           prop: 'age',
           align: 'right',
           width: 100,
+          className: 'red-color',
           tooltip: { placement: 'top-start', content: '<div class="table-tr-tooltip">年龄<hr>说明：用户的年龄</div>' }
         },
         {
@@ -55,6 +56,12 @@ export default {
       ]
     };
   },
-  methods: {}
+  methods: {
+    getTrClass(data, index) {
+      if (index == 2) {
+        return 'bg-gray1-color';
+      }
+    }
+  }
 };
 </script>
diff --git a/doc/components_en/component/data/view/table.vue b/doc/components_en/component/data/view/table.vue
@@ -41,7 +41,7 @@
     <h3>Table select line</h3>
     <exampleEn demo="view/table10"></exampleEn>
 
-    <h3>Table bubble tips</h3>
+    <h3>Table bubble tips and custom style</h3>
     <exampleEn demo="view/table7"></exampleEn>
 
     <h3>Custom table header</h3>
@@ -119,6 +119,13 @@
         <td></td>
         <td></td>
       </tr>
+      <tr>
+        <td>getTrClass</td>
+        <td>get row style,1.19.2+</td>
+        <td>Function(data, index)</td>
+        <td></td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TableItem / Column Property</h3>
@@ -214,6 +221,13 @@
         <td></td>
         <td></td>
       </tr>
+      <tr>
+        <td>className</td>
+        <td>Define column style,1.19.2+</td>
+        <td>String</td>
+        <td></td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>Table Event</h3>

diff --git a/doc/components_en/demos/view/table7.vue b/doc/components_en/demos/view/table7.vue
@@ -7,7 +7,7 @@
 
 <template>
   <div>
-    <Table border stripe :datas="datas" :columns="columns">
+    <Table border stripe :datas="datas" :columns="columns" :getTrClass="getTrClass">
       <div slot="empty">Custom reminder: no data at this time</div>
     </Table>
   </div>
@@ -40,6 +40,7 @@ export default {
           prop: 'age',
           align: 'right',
           width: 100,
+          className: 'red-color',
           tooltip: { placement: 'top-start', content: '<div class="table-tr-tooltip">Age <hr> Description: User\'s age</div>' }
         },
         {
@@ -56,6 +57,12 @@ export default {
       ]
     };
   },
-  methods: {}
+  methods: {
+    getTrClass(data, index) {
+      if (index == 2) {
+        return 'bg-gray1-color';
+      }
+    }
+  }
 };
 </script>
diff --git a/src/components/table/table-item.vue b/src/components/table/table-item.vue
@@ -15,6 +15,7 @@ export default {
     prop: String,
     dict: String,
     align: String,
+    className: String,
     unit: String,
     render: Function,
     sortProp: String,

diff --git a/src/components/table/table-td.vue b/src/components/table/table-td.vue
@@ -13,15 +13,17 @@ export default {
     data: [Object, Array],
     align: String,
     unit: String,
-    render: Function
+    render: Function,
+    className: String
   },
   data() {
     return {};
   },
   computed: {
     cls() {
       return {
-        [`text-${this.align}`]: !!this.align
+        [`text-${this.align}`]: !!this.align,
+        [this.className]: !!this.className
       };
     },
     show() {

diff --git a/src/components/table/table-th.vue b/src/components/table/table-th.vue
@@ -19,6 +19,7 @@ export default {
     colspan: Number,
     title: String,
     width: Number,
+    className: String,
     fixed: String,
     label: String,
     prop: String,
@@ -85,6 +86,7 @@ export default {
     cls() {
       return {
         [`text-${this.align}`]: !!this.align,
+        [this.className]: !!this.className,
         pointer: this.sort
       };
     },

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
@@ -39,7 +39,7 @@
           <tbody class="h-table-tbody">
             <template v-for="(d, index) of datas">
               <TableTr @click="triggerTrClicked" @dblclick="triggerTrDblclicked" :datas="d" :key="index+update.datas"
-                :index="index" :trIndex="index" :class="{'h-table-tr-selected': isChecked(d), 'h-table-tr-select-disabled': d._disabledSelect}">
+                :index="index" :trIndex="index" :class="getTrCls(d, index)">
                 <td v-if="checkbox" class="h-table-td-checkbox">
                   <Checkbox v-if="fixedColumnLeft.length==0" v-model="checks" :value="d"></Checkbox>
                 </td>
@@ -64,7 +64,7 @@
           <tbody class="h-table-tbody">
             <template v-for="(d, index) of datas">
               <TableTr @click="triggerTrClicked" @dblclick="triggerTrDblclicked" :datas="d" :key="index+update.datas"
-                :index="index" :trIndex="index" :class="{'h-table-tr-selected': isChecked(d), 'h-table-tr-select-disabled': d._disabledSelect}">
+                :index="index" :trIndex="index" :class="getTrCls(d, index)">
                 <td v-if="checkbox" class="h-table-td-checkbox">
                   <Checkbox v-model="checks" :value="d"></Checkbox>
                 </td>
@@ -82,7 +82,7 @@
           <tbody class="h-table-tbody">
             <template v-for="(d, index) of datas">
               <TableTr @click="triggerTrClicked" @dblclick="triggerTrDblclicked" :datas="d" :key="index+update.datas"
-                :index="index" :trIndex="index" :class="{'h-table-tr-selected': isChecked(d), 'h-table-tr-select-disabled': d._disabledSelect}">
+                :index="index" :trIndex="index" :class="getTrCls(d, index)">
                 <slot :data="d" :index="index" v-if="isTemplateMode"></slot>
               </TableTr>
             </template>
@@ -163,7 +163,8 @@ export default {
     selectRow: {
       type: Boolean,
       default: false
-    }
+    },
+    getTrClass: Function
   },
   data() {
     return {
@@ -298,6 +299,20 @@ export default {
     });
   },
   methods: {
+    getTrCls(d, index) {
+      let cls = {
+        'h-table-tr-selected': this.isChecked(d),
+        // eslint-disable-next-line comma-dangle
+        'h-table-tr-select-disabled': d._disabledSelect,
+      };
+      if (this.getTrClass) {
+        let trClass = this.getTrClass(d, index);
+        if (trClass) {
+          cls[trClass] = true;
+        }
+      }
+      return cls;
+    },
     isChecked(d) {
       return this.checks.indexOf(d) > -1 || (this.selectRow && d == this.rowSelected);
     },