Comment personnaliser l'effet de survol des lignes de fusion dans El-Table?

Explication détaillée de l'effet de survol de la fusion El-Table

Lorsque le composant El-Table de l'élément UI s'affronte, l'effet de survol par défaut peut ne pas répondre aux besoins personnalisés. Cet article montrera avec des exemples sur la personnalisation de la mise en évidence de survol des lignes fusionnées.

Scénarios et objectifs

En supposant que notre Table contient des lignes de fusion, nous devons mettre en œuvre deux effets de survole:

1. Effet 1: mise en surbrillance d'une ligne unique ou mettant la ligne de mise en évidence lorsque la souris plane sur une rangée de lignes de fusion, seule la ligne ou la zone entière de ligne de fusion est mise en évidence.
2. Effet 2: Présentation globale Lorsque la souris plane sur n'importe quelle rangée de lignes de fusion, mettez en surbrillance toutes les lignes de fusion.

Plan de mise en œuvre

Nous devons combiner CSS et JavaScript pour obtenir des effets personnalisés.

1. Effet 1: point culminant à ligne unique ou à fusion

Utilisez row-class-name et combinez-le avec CSS Style Control.

<el-table :row-class-name="getRowClassName"></el-table>

 Méthodes: {
  getrowClassName ({row, rowIndex}) {
    // juger de mettre en évidence toute la ligne ou de mettre en évidence la dernière ligne au besoin. Retour Row.ismerged? «Row fusionné»: »; // L'attribut ismergé est utilisé pour identifier les lignes fusionnées}
}

 .El-Table .Merged-Row: Hover {
  Color d'arrière-plan: # F0F0F0; / * Fusion de la ligne de mise en évidence les styles * /
}

.el-Table .Merged-Row: Hover TD: Last-Child {/ * ne met en évidence que le dernier style de ligne * /
  Color d'arrière-plan: # F0F0F0;
}

2. Effet 2: mettre en évidence la situation globale

Vous devez utiliser JavaScript pour écouter pour des événements de survol et ajouter dynamiquement le nom de la classe CSS.

<el-table ref="tableRef"></el-table>

 données() {
  retour {
    Soulights de surbrillance: []
  };
},
Méthodes: {
  Handlerrowenter (row) {
    if (row.ismerged) {
      this.highlightedRows = this.getAllMergedRows (row); // obtient toutes les lignes fusionnées} else {
      this.highlightedRows = [row];
    }
    this.upDaterowClasses ();
  },
  HandleRowlave () {
    this.highlightedRows = [];
    this.upDaterowClasses ();
  },
  getAllMergedRows (row) {
    // Obtenez toutes les données de ligne appartenant à la même ligne fusionnée en fonction de la structure de données réelle // Cette pièce doit être ajustée en fonction de votre structure de données Retour [ligne]; // Exemple: ne met pas uniquement en surbrillance la ligne actuelle},
  updaterowClasses () {
    this. $ Refs.tableref. $ el.queryselectorall ('. el-table__row'). foreach ((Rowel, index) => {
      if (this.highlightedrows.includs (this.Tabledata [index])) {
        rowel.classlist.add ('highlight-all');
      } autre {
        rowel.classlist.remove ('highlight-all');
      }
    });
  }
}

 .el-table .highlight-all {
  Color d'arrière-plan: # F0F0F0; / * Style de mise en évidence global * /
}

Dans le code ci-dessus, la propriété isMerged est utilisée pour identifier les lignes fusionnées, et la fonction getAllMergedRows doit être ajustée en fonction de votre structure de données pour obtenir correctement toutes les données de ligne appartenant à la même ligne fusionnée. Grâce à ces méthodes, vous pouvez personnaliser de manière flexible l'effet de survol des fusions El-Table. N'oubliez pas d'ajuster le code en fonction de votre structure de données réelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!