Table: table add highlight selection row (#22382)

* Table: table add highlight selection row

* chore: 调整高亮类名

examples/docs/en-US/table.md

@@ -1817,6 +1817,7 @@ You can customize row index in `type=index` columns.
 | fit | whether width of column automatically fits its container | boolean | — | true |
 | show-header | whether Table header is visible | boolean | — | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
+| highlight-selection-row | whether selection row is highlighted | boolean | — | false |
 | current-row-key | key of current row, a set only prop | string,number | — | — |
 | row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
 | row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |

examples/docs/es/table.md

@@ -1822,6 +1822,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | fit                    | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean                                  | —                              | true                                     |
 | show-header            | especifica si la cabecera de la tabla es visible | boolean                                  | —                              | true                                     |
 | highlight-current-row  | especifica si la fila actual es resaltado | boolean                                  | —                              | false                                    |
+| highlight-selection-row | resaltar la selección de líneas de verificación | boolean | — | false |
 | current-row-key        | clave de la fila actual, un ajuste de propiedad única | string,number                            | —                              | —                                        |
 | row-class-name         | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String         | —                              | —                                        |
 | row-style              | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object         | —                              | —                                        |

examples/docs/fr-FR/table.md

@@ -1824,6 +1824,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 | fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
 | show-header | Si le header de la table est visible. | boolean | — | true |
 | highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
+| highlight-selection-row | Sélectionner la ligne à cocher en surbrillance | boolean | — | false |
 | current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |
 | row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |
 | row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |

examples/docs/zh-CN/table.md

@@ -1860,6 +1860,7 @@
 | fit | 列的宽度是否自撑开 | boolean | — | true |
 | show-header | 是否显示表头 | boolean | — | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
+| highlight-selection-row | 是否要高亮复选框选中行（仅针对开启 `selection` 有效） | boolean | — | false |
 | current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
 | row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
 | row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |

packages/table/src/table-body.js

@@ -1,5 +1,5 @@
 import { arrayFindIndex } from 'element-ui/src/utils/util';
-import { getCell, getColumnByCell, getRowIdentity } from './util';
+import { getCell, getColumnByCell, getRowIdentity, objectEquals } from './util';
 import { getStyle, hasClass, removeClass, addClass } from 'element-ui/src/utils/dom';
 import ElCheckbox from 'element-ui/packages/checkbox';
 import ElTooltip from 'element-ui/packages/tooltip';
@@ -168,11 +168,20 @@ export default {
     },
 
     getRowClass(row, rowIndex) {
+      let selection = this.store.states.selection;
       const classes = ['el-table__row'];
       if (this.table.highlightCurrentRow && row === this.store.states.currentRow) {
         classes.push('current-row');
       }
 
+      if (this.table.highlightSelectionRow) {
+        for (let i = 0; i < selection.length; i++) {
+          if (objectEquals(row, selection[i])) {
+            classes.push('selection-row');
+          }
+        };
+      }
+
       if (this.stripe && rowIndex % 2 === 1) {
         classes.push('el-table__row--striped');
       }

packages/table/src/table.vue

@@ -295,6 +295,11 @@
 
       highlightCurrentRow: Boolean,
 
+      highlightSelectionRow: {
+        type: Boolean,
+        default: false
+      },
+
       currentRowKey: [String, Number],
 
       emptyText: String,

packages/table/src/util.js

@@ -253,3 +253,21 @@ export function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasC
     }
   });
 }
+
+export const objectEquals = function(objectA, objectB) {
+  // 取对象a和b的属性名
+  let aProps = Object.getOwnPropertyNames(objectA);
+  let bProps = Object.getOwnPropertyNames(objectB);
+  // 判断属性名的length是否一致
+  if (aProps.length !== bProps.length) {
+    return false;
+  }
+  // 循环取出属性名，再判断属性值是否一致
+  for (let i = 0; i < aProps.length; i++) {
+    let propName = aProps[i];
+    if (objectA[propName] !== objectB[propName]) {
+      return false;
+    }
+  }
+  return true;
+};

packages/theme-chalk/src/table.scss

@@ -486,7 +486,7 @@
           background: #FAFAFA;
         }
 
-        &.current-row td.el-table__cell {
+        &.current-row td.el-table__cell, &.selection-row td.el-table__cell {
           background-color: $--table-current-row-background-color;
         }
       }
@@ -496,7 +496,7 @@
   @include e(body) {
     tr.hover-row {
       &, &.el-table__row--striped {
-        &, &.current-row {
+        &, &.current-row, &.selection-row {
           > td.el-table__cell {
             background-color: $--table-row-hover-background-color;
           }
@@ -504,7 +504,7 @@
       }
     }
 
-    tr.current-row > td.el-table__cell {
+    tr.current-row > td.el-table__cell, tr.selection-row > td.el-table__cell {
       background-color: $--table-current-row-background-color;
     }
   }

types/table.d.ts

@@ -63,6 +63,9 @@ export declare class ElTable extends ElementUIComponent {
   /** Whether current row is highlighted */
   highlightCurrentRow: boolean
 
+  /** Whether selection row is highlighted */
+  highlightSelectionRow: boolean
+
   /** Key of current row, a set only prop */
   currentRowKey: string | number