From 7d23590d9fe389c7be31df3f7e0341ad24ad0683 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8F=A8=E5=8F=A8?= Date: Sun, 12 Feb 2023 13:09:03 +0800 Subject: [PATCH 1/2] Table: table add highlight selection row --- 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 ++++++++++++++++++ types/table.d.ts | 3 +++ 8 files changed, 40 insertions(+), 1 deletion(-) 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..4566e3d9b1 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('current-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/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 From d3b74a3ac3246c42141058e7f2c3bb4de3291508 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8F=A8=E5=8F=A8?= Date: Thu, 27 Apr 2023 09:51:07 +0800 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E9=AB=98?= =?UTF-8?q?=E4=BA=AE=E7=B1=BB=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/table/src/table-body.js | 2 +- packages/theme-chalk/src/table.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index 4566e3d9b1..4aea1e6b1b 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -177,7 +177,7 @@ export default { if (this.table.highlightSelectionRow) { for (let i = 0; i < selection.length; i++) { if (objectEquals(row, selection[i])) { - classes.push('current-row'); + classes.push('selection-row'); } }; } 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; } }