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

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

需要シナリオ

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

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

   

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

   

実裝計(jì)畫

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

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

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格數(shù)據(jù)
      ],
      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; /* 清除默認(rèn)懸停樣式 */
}

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

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

特定の実裝手順

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

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

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

改善手順：

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

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

以上が要素UIのエルテーブルのホバースタイルとロジックを調(diào)整する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。