要素UIのエルテーブルのホバースタイルとロジックを調整する方法は？

Element UI El-Tableマージのホバー効果をカスタマイズします

Element UIのel-tableコンポーネントのデフォルトの動作は、マージされた行（ rowspan ）のホバースタイルを扱う際に、すべてのニーズを満たしていない場合があります。この記事では、マージされた行のホバー効果をカスタマイズして、ローカルハイライトとライン全体のハイライトという2つの一般的なシナリオを達成する方法について説明します。

需要シナリオ

el-tableテーブルにマージされた行が含まれていると仮定すると、次の2つのホバー効果を達成したいと思います。

1. ローカルハイライト（エフェクト1）：マージされた行の列にマウスがホールすると、列とそのセルのみを右に強調表示するか、特定の列のみを強調表示します。これには、強調表示された領域の正確な制御が必要です。

   

2. 行全体を強調表示します（エフェクト2）：マージ行の列にマウスが渡ると、すべての交差列セルを含むマージ行全体が強調表示されます。

   

実装計画

これには、CSSスタイルのカスタマイズとJavaScriptの動的制御クラス名の組み合わせが必要です。以下は、改善されたソリューションを提供します。

<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>

特定の実装手順

1. ロジック（ arraySpanMethod ）をマージしますarraySpanMethod関数を書き込み、データ構造に従ってロジックをマージするロジックを実装します。コードのこの部分は提供されておらず、実際のデータに基づいて記述する必要があります。

2. ローカルハイライト（エフェクト1）： handleCellMouseEnterメソッドでは、 row.rowIndexとcolumn.columnIndexに基づいて強調表示する必要があるセルを判断し、 hoveredクラス名を動的に追加します。これには、テーブル列の定義でローカルに強調表示する必要がある列にclass="hovered"属性を追加する必要があります。 CSSの.el-table__cell.hoveredスタイルは、ハイライト効果を制御します。

3. ライン全体を強調表示します（効果2）： handleCellMouseEnterメソッドで、同じマージされた行に属するすべての行を見つけて、 hover-all名を追加します。 handleCellMouseLeaveのクラス名を削除します。これには、より複雑なDOM操作が必要であり、 this.$refs.table.$el.querySelectorAll 、関連する行要素を選択します。 CSSの.el-table__row.hover-all tdスタイルは、ハイライト効果を制御します。

改善手順：

• より明確なCSSクラス名がhovered 、 hover-all使用され、ローカルおよび行全体のハイライトスタイルを区別します。
• !important 、CSSで使用され、要素UIのデフォルトスタイルをオーバーライドして、カスタムスタイルが有効になることを確認しました。
• コード構造は、より明確かつ理解し、維持しやすいです。

このソリューションは、マージのホバー効果をカスタマイズするための、より柔軟でスケーラブルな方法を提供します。特定のニーズとテーブル構造、特にarraySpanMethodとhandleCellMouseEnter / handleCellMouseLeaveメソッドに従ってコードを調整する必要があります。実際のニーズに応じてローカルハイライトまたはライン全体の強調表示を選択するか、2つを組み合わせて使用​​することを忘れないでください。

以上が要素UIのエルテーブルのホバースタイルとロジックを調整する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。