El-table of Element UI에서 병합 된 행의 호버 효과를 사용자 정의하는 방법은 무엇입니까?

요소 UI el-table은 호버 효과 사용자 정의를 병합합니다

이 기사에서는 UI el-table 구성 요소에서 병합의 호버 효과를 사용자 정의하는 방법에 대해 설명합니다. 사용자는 두 가지 다른 호버 동작을 구현하려고합니다.

1. 단일 라인 하이라이트 (오른쪽 또는 전체 행) : 마우스가 병합 된 행의 행 위로 이동하면 병합 된 행의 오른쪽 부분 만 강조 표시되거나 병합 된 행의 모든 ​​행이 강조 표시됩니다.

2. 전체 행 그룹 하이라이트 하이라이트 : 마우스가 병합 된 행의 행 위로 이동하면 병합 된 행의 모든 ​​행을 강조 표시합니다.

구현 계획

위의 효과는 CSS 스타일과 JavaScript 로직을 결합하여 달성 할 수 있습니다. 다음은 구현 방법을 제공하며, 이는 특정 요구에 따라 CSS 선택기 및 JavaScript 코드의 조정이 필요합니다.

방법 1 : 단일 줄 강조 표시 (예 : 오른쪽에서 강조 표시)

이 접근법은 CSS의 병합 행에 호버 스타일을 추가해야합니다. 특정 구현은 HTML 구조 및 병합 된 CSS 클래스 이름에 따라 다르므로 다음은 다음과 같습니다.

 .el-table__row-- 머지 르 { /* 병합 된 행 클래스 이름으로 교체* /
  / * ... 다른 스타일 ... */
}

.EL-TABLE__ROW-- 머지 : 호버 {
  배경색 : #f5f5f5; /* 하이라이트 색상으로 수정*/
}

.EL-TABLE__CELL : Last-Child.el-Table__ROW-- 머지 르 : 호버 { /* 마지막 열을 강조 표시* /
  배경색 : #f5f5f5;
}

방법 2 : 전체 라인을 강조 표시하십시오

이 방법은 JavaScript를 사용하여 마우스 오버 이벤트를 듣고 병합 행 그룹의 스타일을 동적으로 수정해야합니다. 병합 된 행 그룹의 공통 식별자 (예 : 동일한 row-key 또는 사용자 정의 속성)를 찾아야합니다.

 // 테이블 데이터가 TableData이고 각 행에 고유 한 ID가 있다고 가정합니다.
const table = this. $ refs.table; // el-table 인스턴스 테이블을 가져옵니다. $ el.addeventListener ( 'mouseover', (event) => {
  if (event.target.classlist.contains ( 'el-table__row')) {// 행 const row = event.target;
    const rowid = row.dataset.rowid; // 행 ID를 가져옵니다

    // 동일한 병합 된 행 그룹에 속하는 모든 행을 찾고 하이라이트 스타일 테이블을 추가합니다. $ el.QuerySelectorall ( '. el-table__row [data-row-id^= "'rowid.split ( '-') [0] ']'). foreach (el => {
      el.classlist.add ( '하이라이트');
    });
  }
});

표. $ el.adeventListener ( '마우스 아웃', (이벤트) => {
  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]'] '). foreach (el => {
      el.classlist.remove ( '하이라이트');
    });
  }
});

그런 다음 CSS에서 highlight 클래스를 추가하십시오.

 .highlight {
  배경색 : #ffff00; /* 하이라이트 색상으로 수정*/
}

참고 : 위의 코드는 예제 일뿐입니다. 실제 코드 구조 및 데이터에 따라 조정해야합니다. data-row-id 병합 된 행 그룹을 식별하는 데 실제로 사용하는 속성 또는 방법으로 바꾸는 데 필요한 가상의 속성입니다. rowId.split('-')[0] rowId - 병합 병렬 그룹 ID 및 인라인 ID를 사용한다고 가정합니다.

CSS 선택기 및 JavaScript 이벤트 리스너를 조정하면 다양한 설계 요구를 충족시키기 위해 EL-Table 병합의 호버 효과를 유연하게 제어 할 수 있습니다. 실제 HTML 구조 및 데이터에 따라 수정하십시오.

위 내용은 El-table of Element UI에서 병합 된 행의 호버 효과를 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!