From 041227db4d14167e5345402993c28fc30a10de31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8F=A8=E5=8F=A8?= Date: Mon, 14 Aug 2023 17:58:41 +0800 Subject: [PATCH] Table: table add highlight selection row (#22382) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Table: table add highlight selection row * chore: 调整高亮类名 --- examples/docs/en-US/table.md | 1 + examples/docs/es/table.md | 1 + examples/docs/fr-FR/table.md | 1 + examples/docs/zh-CN/table.md | 1 + packages/table/src/table-body.js | 11 ++++++++++- packages/table/src/table.vue | 5 +++++ packages/table/src/util.js | 18 ++++++++++++++++++ packages/theme-chalk/src/table.scss | 6 +++--- types/table.d.ts | 3 +++ 9 files changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 173309633..3d78fe665 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 36f32ffd8..140b05e81 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 a9d873ac1..1142df6ea 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 21eb413f4..5a99dde39 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 cd22348ff..4aea1e6b1 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 2fa3c93ad..6fe658e9e 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 7bbec8d64..995784216 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 b7e66d5a1..876702981 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 da5bb3806..860c2f9af 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