Table: add single selection back. Add current-change event & highlight-current-row event.

packages/table/src/table-body.js

@@ -9,7 +9,8 @@ export default {
       required: true
     },
     rowClassName: [String, Function],
-    fixed: String
+    fixed: String,
+    highlight: Boolean
   },
 
   render(h) {
@@ -115,6 +116,11 @@ export default {
         classes.push(rowClassName.apply(null, [row, index]) || '');
       }
 
+      const currentRow = this.store.states.currentRow;
+      if (this.highlight && currentRow === row) {
+        classes.push('current-row');
+      }
+
       return classes.join(' ');
     },
 
@@ -161,6 +167,8 @@ export default {
         }
       }
 
+      this.store.commit('setCurrentRow', row);
+
       table.$emit('row-click', row, event);
     },
 

packages/table/src/table-store.js

@@ -74,6 +74,7 @@ const TableStore = function(table, initialState = {}) {
     selection: [],
     reserveSelection: false,
     selectable: null,
+    currentRow: null,
     hoverRow: null,
     filters: {}
   };
@@ -89,6 +90,9 @@ TableStore.prototype.mutations = {
   setData(states, data) {
     states._data = data;
     states.data = sortData((data || []), states);
+
+    this.updateCurrentRow();
+
     const selection = states.selection;
 
     if (!states.reserveSelection) {
@@ -186,13 +190,23 @@ TableStore.prototype.mutations = {
     states.hoverRow = row;
   },
 
+  setCurrentRow(states, row) {
+    const oldCurrentRow = states.currentRow;
+    states.currentRow = row;
+
+    if (oldCurrentRow !== row) {
+      this.table.$emit('current-change', row, oldCurrentRow);
+    }
+  },
+
   rowSelectedChanged(states, row) {
     const changed = toggleRowSelection(states, row);
     const selection = states.selection;
 
     if (changed) {
-      this.table.$emit('selection-change', selection);
-      this.table.$emit('select', selection, row);
+      const table = this.table;
+      table.$emit('selection-change', selection);
+      table.$emit('select', selection, row);
     }
 
     this.updateAllSelected();
@@ -216,10 +230,11 @@ TableStore.prototype.mutations = {
       }
     });
 
+    const table = this.table;
     if (selectionChanged) {
-      this.table.$emit('selection-change', selection);
+      table.$emit('selection-change', selection);
     }
-    this.table.$emit('select-all', selection);
+    table.$emit('select-all', selection);
     states.isAllSelected = value;
   })
 };
@@ -295,6 +310,21 @@ TableStore.prototype.scheduleLayout = function() {
   this.table.debouncedLayout();
 };
 
+TableStore.prototype.updateCurrentRow = function() {
+  const states = this.states;
+  const table = this.table;
+  const data = states.data || [];
+  const oldCurrentRow = states.currentRow;
+
+  if (data.indexOf(oldCurrentRow) === -1) {
+    states.currentRow = null;
+
+    if (states.currentRow !== oldCurrentRow) {
+      table.$emit('current-change', null, oldCurrentRow);
+    }
+  }
+};
+
 TableStore.prototype.commit = function(name, ...args) {
   const mutations = this.mutations;
   if (mutations[name]) {

packages/table/src/table.vue

@@ -17,6 +17,7 @@
         :store="store"
         :layout="layout"
         :row-class-name="rowClassName"
+        :highlight="highlightCurrentRow"
         :style="{ width: layout.bodyWidth ? layout.bodyWidth - (layout.scrollY ? layout.gutterWidth : 0 ) + 'px' : '' }">
       </table-body>
       <div class="el-table__empty-block" v-if="!data || data.length === 0">
@@ -47,6 +48,7 @@
           fixed="left"
           :store="store"
           :layout="layout"
+          :highlight="highlightCurrentRow"
           :row-class-name="rowClassName"
           :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }">
         </table-body>
@@ -78,6 +80,7 @@
           :store="store"
           :layout="layout"
           :row-class-name="rowClassName"
+          :highlight="highlightCurrentRow"
           :style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }">
         </table-body>
       </div>
@@ -130,6 +133,8 @@
 
       rowClassName: [String, Function],
 
+      highlightCurrentRow: Boolean,
+
       emptyText: {
         type: String,
         default: $t('el.table.emptyText')

packages/theme-default/src/table.css

@@ -330,7 +330,7 @@
         background-color: #eff2f7;
       }
 
-      tr.current-row {
+      tr.current-row td {
         background: #eff7ff;
       }
     }