요소 플러스 테이블 구성 요소 Max-Height가 잘못 되었습니까? 테이블을 적응력이 높고 스크롤 바를 표시하는 방법은 무엇입니까?

요소 플러스 테이블 구성 요소 최대 높이 속성 실패 및 솔루션

Element Plus를 사용하는 개발 프로세스 동안, 우리는 종종 컨텐츠에 따라 동적으로 테이블 높이가 변경 될 필요가 있지만 무한히 길어질 수는 없습니다. 이상적으로는 콘텐츠가 상위 요소의 100%에 도달 할 때까지 콘텐츠가 커지면 테이블 높이가 커지고 스크롤 막대가 섹션 이외의 내용을 표시하는 것처럼 보입니다. 그러나 EL-TABLE 구성 요소에 대해 최대 높이 : 100% 속성을 직접 설정하는 것은 종종 예상 효과를 달성하지 못합니다. 테이블 높이가 부모 요소의 100%에 도달하지만 스크롤 막대는 정상적으로 표시 될 수 없습니다.

이 문제의 근본적인 이유는 el-table 구성 요소 자체가 고도로 전산화되기 때문입니다. Max-Height 속성은 특정 초기 높이에 영향을 미치며 컨텐츠가 완전히로드되지 않거나 컨텐츠 높이가 변경되면 EL-TABLE 구성 요소가 자체 높이를 정확하게 계산하여 최대 높이의 속성을 실패시킬 수 없습니다.

이 문제를 해결하기 위해 다음 두 가지 방법을 사용할 수 있습니다.

첫 번째 방법은 el-table 구성 요소의 높이 값을 확실히 갖도록하는 것입니다. 높이 : 500px 또는 높이 : calc (100vh -100px)와 같은 높이 속성을 직접 설정하여 달성 할 수 있습니다. 이 방법의 단점은 테이블의 이상적인 높이를 미리 알리거나 계산해야하며 충분히 유연하지 않다는 것입니다.

두 번째 방법은 더 유연하고 상위 요소의 높이 변화에 귀를 기울이고 부모 요소의 높이를 EL-TABLE 구성 요소에 동적으로 할당합니다. 특정 구현 방법은 JavaScript를 사용하여 부모 요소의 크기 조정 이벤트를 듣거나 다른 반응 형 레이아웃 기술을 사용해야합니다. 이런 식으로, EL-TABLE 구성 요소의 높이는 항상 상위 요소의 높이와 일치하므로 최대 높이의 효과를 달성합니다 : 100%. 내용 높이가 상위 요소의 높이를 초과하더라도 스크롤 막대를 정상적으로 표시 할 수 있습니다. 이 방법은 상위 요소의 크기에 따라 테이블 높이를 적응 적으로 조정할 수 있으며, 이는 동적 컨텐츠 변경의 요구 사항과 더 일치합니다.

위 내용은 요소 플러스 테이블 구성 요소 Max-Height가 잘못 되었습니까? 테이블을 적응력이 높고 스크롤 바를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!