Comment ajuster le style de survol et la logique des lignes fusionnées dans El-Table dans l'élément UI?

Personnalisez l'effet de survol de l'élément UI El-Table Merge

Le comportement par défaut du composant el-table de l'interface utilisateur de l'élément peut ne pas répondre à tous les besoins lorsqu'il s'agit de styles de lignes de lignes fusionnées ( rowspan ). Cet article explorera comment personnaliser l'effet de survol des lignes fusionnées pour réaliser deux scénarios communs: la mise en évidence locale et la mise en évidence de la ligne entière.

Scénarios de demande

En supposant qu'un tableau el-table contient des lignes fusionnées, nous voulons réaliser les deux effets de survol suivants:

1. Souligion locale (effet 1): Lorsque la souris plane sur n'importe quelle rangée d'une ligne fusionnée, elle ne mettra en évidence que la ligne et ses cellules vers la droite, ou ne mettent en évidence qu'une colonne spécifique. Cela nécessite un contrôle précis de la zone en surbrillance.

   

2. Mettez en surbrillance toute la ligne (effet 2): Lorsque la souris plane sur n'importe quelle ligne de la ligne de fusion, toute la ligne de fusion sera mise en évidence, y compris toutes les cellules transversales.

   

Plan de mise en œuvre

Cela nécessite la combinaison de la personnalisation du style CSS et des noms de classe de contrôle dynamique JavaScript. Ce qui suit fournit une solution améliorée:

<template>
  <el-table ref="table" :data="tableData" :span-method="arraySpanMethod">
    
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      hoveredRowIndex: null,
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并行逻辑
    },
    handleCellMouseEnter(row, column, cell, event) {
      this.hoveredRowIndex = row.rowIndex;
    },
    handleCellMouseLeave(row, column, cell, event) {
      this.hoveredRowIndex = null;
    },
  },
};
</script>

<style scoped>
.el-table .el-table__row:hover td {
  background-color: transparent !important; /* 清除默认悬停样式 */
}

.el-table__cell.hovered { /* 局部高亮样式 */
  background-color: #f5f7fa !important;
}

.el-table__row.hover-all td { /* 整行高亮样式 */
  background-color: #f5f7fa !important;
}
</style>

Étapes de mise en œuvre spécifiques

1. Merger la logique ( arraySpanMethod ) : écrivez la fonction arraySpanMethod pour implémenter la logique de fusionner la logique en fonction de votre structure de données. Cette partie du code n'est pas fournie et doit être écrite en fonction de vos données réelles.

2. Fixation locale (effet 1): Dans la méthode handleCellMouseEnter , jugez les cellules qui doivent être mises en évidence sur la base de row.rowIndex et column.columnIndex , et ajouter dynamiquement le nom de classe hovered . Cela nécessite d'ajouter un attribut class="hovered" aux colonnes qui doivent être mis en surbrillance localement dans la définition de la colonne de table. Le style .el-table__cell.hovered dans CSS contrôlera l'effet de mise en évidence.

3. Mettez en surbrillance la ligne entière (effet 2): Dans la méthode handleCellMouseEnter , trouvez toutes les lignes appartenant à la même ligne fusionnée et ajoutez hover-all . Retirez le nom de classe dans handleCellMouseLeave . Cela nécessite des opérations DOM plus complexes, ce qui peut nécessiter l'utilisation this.$refs.table.$el.querySelectorAll pour sélectionner les éléments de ligne pertinents. .el-table__row.hover-all td dans CSS contrôlera l'effet de mise en évidence.

Instructions d'amélioration:

• Les noms de classe CSS plus clairs hovered et hover-all sont utilisés pour distinguer les styles de mise en évidence des lignes locales et entières.
• !important a été utilisé dans CSS pour remplacer le style par défaut de l'interface utilisateur de l'élément pour s'assurer que le style personnalisé entre en vigueur.
• La structure du code est plus claire et plus facile à comprendre et à maintenir.

Cette solution fournit un moyen plus flexible et évolutif de personnaliser l'effet de survol de la fusion. Vous devez ajuster le code en fonction de vos besoins spécifiques et de votre structure de table, en particulier arraySpanMethod et handleCellMouseEnter / handleCellMouseLeave . N'oubliez pas de choisir la mise en évidence locale ou la mise en évidence de la ligne entière en fonction de vos besoins réels, ou utilisez les deux en combinaison.

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!