diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 1733096333..3d78fe6650 100644 --- a/examples/docs/en-US/table.md +++ b/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 | — | — | diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md index 36f32ffd85..140b05e81e 100644 --- a/examples/docs/es/table.md +++ b/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 | — | — | diff --git a/examples/docs/fr-FR/table.md b/examples/docs/fr-FR/table.md index a9d873ac12..1142df6ead 100644 --- a/examples/docs/fr-FR/table.md +++ b/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 | — | — | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 21eb413f4b..5a99dde39a 100644 --- a/examples/docs/zh-CN/table.md +++ b/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 | — | — | diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index cd22348fff..4aea1e6b1b 100644 --- a/packages/table/src/table-body.js +++ b/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'); } diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 2fa3c93add..6fe658e9e0 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -295,6 +295,11 @@ highlightCurrentRow: Boolean, + highlightSelectionRow: { + type: Boolean, + default: false + }, + currentRowKey: [String, Number], emptyText: String, diff --git a/packages/table/src/util.js b/packages/table/src/util.js index 7bbec8d64e..9957842165 100644 --- a/packages/table/src/util.js +++ b/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; +}; diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss index b7e66d5a17..8767029816 100644 --- a/packages/theme-chalk/src/table.scss +++ b/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; } } diff --git a/types/table.d.ts b/types/table.d.ts index da5bb3806a..860c2f9af7 100644 --- a/types/table.d.ts +++ b/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