元素UIのエルテーブルでマージされた行のホバー効果をカスタマイズする方法は？

Element UI EL-Tableマージホバー効果のカスタマイズ

この記事では、Element UI el-tableコンポーネントでのマージのホバー効果をカスタマイズする方法について説明します。ユーザーは、2つの異なるホバー動作を実装したいと考えています。

1. シングルラインハイライト（右または列全体）：マージされた行の列の上にマウスが並ぶとき、マージされた行の右部分のみが強調表示されるか、マージされた行のすべての行が強調表示されます。

2. 完全な行のグループのハイライト：マージされた行の任意の行にマウスが張られたら、マージされた行のすべての行を強調表示します。

実装計画

上記の効果は、CSSスタイルとJavaScriptロジックを組み合わせることで実現できます。以下は、特定のニーズに応じてCSSセレクターとJavaScriptコードの調整が必要な実装方法を提供します。

方法1：シングルラインの強調表示（例：右側のハイライト）

このアプローチでは、CSSのマージ行にホバースタイルを追加する必要があります。特定の実装はHTML構造に依存し、CSSクラス名をマージしたため、次の例を次に示します。

 .el-table__row  -  merged { /*合併した行クラス名に置き換えます* /
  / * ...その他のスタイル... */
}

.el-table__row  -  merged：hover {
  背景色：＃f5f5f5; /*ハイライトカラーに変更*/
}

.el-table__cell：last-child.el-table__row  -  merged：hover { /*最後の列のみを強調表示* /* /
  背景色：＃f5f5f5;
}

方法2：行全体を強調表示します

この方法では、JavaScriptを使用してマウスオーバーイベントをリッスンし、マージされた行グループのスタイルを動的に変更する必要があります。マージされた行グループの共通識別子を見つける必要があります（たとえば、同じrow-keyまたはcustom属性）。

 //テーブルデータがTabledataであり、各行が一意のIDを持っているとします
const table = this。$ refs.table; // eltableインスタンステーブルを取得します。$ el.addeventlistener（ 'mouseover'、（event）=> {
  if（event.target.classlist.contains（ 'el-table__row'））{// row const row = event.targetでホバリングしているかどうかを確認します。
    const rowid = row.dataset.rowid; //行IDを取得します

    //同じマージされた行グループに属するすべての行を見つけて、ハイライトスタイルのテーブルを追加します。$ el.QuerySeLectorall（'。El-Table__Row [data-row-id^= "'rowid.split（'  -  '）[0]'"] '）。
      el.classlist.add（ 'highlight'）;
    }）;
  }
}）;

表。$ el.addeventlistener（ 'mouseout'、（event）=> {
  if（event.target.classlist.contains（ 'el-table__row'））{
    const row = event.target;
    const rowid = row.dataset.rowid;
    表。$ el.QuerySeLectorall（'。El-Table__Row [data-row-id^= "'rowid.split（'  -  '）[0]' '"]'）。
      el.classlist.remove（ 'highlight'）;
    }）;
  }
}）;

次に、CSSのhighlightクラスを追加します。

 .highlight {
  バックグラウンドカラー：＃ffff00; /*ハイライトカラーに変更*/
}

注：上記のコードは単なる例です。実際のコード構造とデータに従って調整する必要があります。 data-row-idマージされた行グループを識別するために実際に使用するプロパティまたは方法に置き換えるために必要な仮説的なプロパティです。 rowId.split('-')[0] rowIdが-マージパラレルグループIDとインラインIDを使用すると仮定します。

CSSセレクターとJavaScriptイベントリスナーを調整することにより、さまざまな設計ニーズを満たすために、エルテーブルマージのホバー効果を柔軟に制御できます。実際のHTML構造とデータに従って変更することを忘れないでください。

以上が元素UIのエルテーブルでマージされた行のホバー効果をカスタマイズする方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。