mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-29 10:47:36 +08:00
Table: table add highlight selection row (#22382)
* Table: table add highlight selection row * chore: 调整高亮类名
This commit is contained in:
王叨叨
GitHub
parent
f14b5ba540
commit
041227db4d
@ -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 | — | — |
|
||||
|
||||
@ -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 | — | — |
|
||||
|
||||
@ -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 | — | — |
|
||||
|
||||
@ -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 | — | — |
|
||||
|
||||
@ -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');
|
||||
}
|
||||
|
||||
@ -295,6 +295,11 @@
|
||||
|
||||
highlightCurrentRow: Boolean,
|
||||
|
||||
highlightSelectionRow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
currentRowKey: [String, Number],
|
||||
|
||||
emptyText: String,
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
3
types/table.d.ts
vendored
3
types/table.d.ts
vendored
@ -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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user