Merge pull request #107 from Leopoldthecoder/next

update custom background table

examples/docs/table.md

@@ -248,9 +248,9 @@
 
 ## 带状态表格
 
-通过在`data`对象数组中加入字段，可以给行加上状态，Element 提供了四种状态：`$positive`、`$info`、`$warning`以及`$negative`，在对象新增字段中把状态设为`true`表示启用该状态。
+可以为行添加自定义背景色，表明该行处于某种状态。若某一行拥有`custom-criteria`数组中的某个字段且值为`true`，则为该行添加`custom-background-colors`数组中对应的背景色。
 
-<el-table :data="tableData2" style="width: 520px">
+<el-table :data="tableData2" style="width: 520px" :custom-criteria="['$info', '$positive']" :custom-background-colors="['#C9E5F5', '#E2F0E4']">
   <el-table-column property="date" label="日期" width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
   <el-table-column property="address" label="地址"></el-table-column>
@@ -258,7 +258,7 @@
 
 ```html
 <template>
-  <el-table :data="tableData2">
+  <el-table :data="tableData2" :custom-criteria="['$info', '$positive']" :custom-background-colors="['#C9E5F5', '#E2F0E4']">
     <el-table-column property="date" label="日期" width="120"></el-table-column>
     <el-table-column property="name" label="姓名" width="120"></el-table-column>
     <el-table-column property="address" label="地址"></el-table-column>

packages/table/src/table-body.js

@@ -43,13 +43,10 @@ export default {
               <tr
                 on-click={ ($event) => this.handleClick($event, row) }
                 on-mouseenter={ _ => this.handleMouseEnter($index) }
+                style={ this.getCustomStyle(row) }
                 class={{
                   'current-row': row === this.$parent.selected,
-                  'hover': this.$parent.$parent.hoverRowIndex === $index,
-                  'positive-row': row.$positive,
-                  'info-row': row.$info,
-                  'warning-row': row.$warning,
-                  'negative-row': row.$negative
+                  'hover': this.$parent.$parent.hoverRowIndex === $index
                 }}>
                 {
                   this._l(this.columns, (column) =>
@@ -75,6 +72,8 @@ export default {
 
   data() {
     return {
+      criteria: this.$parent.customCriteria,
+      colors: this.$parent.customBackgroundColors,
       tooltipDisabled: true
     };
   },
@@ -84,6 +83,25 @@ export default {
   },
 
   methods: {
+    checkProperty(row) {
+      if (this.criteria && this.criteria.length > 0) {
+        for (let i = 0, len = this.criteria.length; i < len; i++) {
+          if (row[this.criteria[i]] === true) {
+            return i;
+          }
+        }
+      }
+      return -1;
+    },
+
+    getCustomStyle(row) {
+      if (!this.criteria || !this.colors || this.criteria.length !== this.colors.length) {
+        return {};
+      }
+      let criterionIndex = this.checkProperty(row);
+      return criterionIndex > -1 ? { 'background-color': this.colors[criterionIndex] } : {};
+    },
+
     handleCellMouseEnter(event, row) {
       let grid = this.$parent;
       const cell = getCell(event);

packages/table/src/table.vue

@@ -81,7 +81,10 @@
 
       gutterWidth: {
         default: 0
-      }
+      },
+
+      customCriteria: Array,
+      customBackgroundColors: Array
     },
 
     components: {

packages/theme-default/src/table.css

@@ -253,22 +253,6 @@
       }
     }
 
-    & tr.positive-row {
-      background: #E2F0E4;
-    }
-
-    & tr.info-row {
-      background: #C9E5F5;
-    }
-
-    & tr.warning-row {
-      background: #FEEED9;
-    }
-
-    & tr.negative-row {
-      background: #F7D2D3;
-    }
-
     & tr.current-row {
       background: #EFF7FF;
     }