Vue 헤더가 잘못 정렬된 경우 수행할 작업

Vue 테이블 헤더 정렬 문제 해결 방법: 1. 프로젝트 항목 파일을 찾아 전역 스타일을 ".el-table th.gutter{display: table-cell!important;}"로 추가합니다. 2. 전역 스타일로 코드를 작성합니다. 3. 마우스 오버 시 배경색 변경 이벤트를 제거합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, vue3 버전, DELL G3 컴퓨터

vue 헤더가 잘못 정렬되면 어떻게 해야 합니까?

Vue element-ui 정렬 문제를 해결하는 방법 element-ui의 테이블에 있는 헤더와 테이블의

element-ui 테이블 헤더와 테이블이 잘못 정렬되었습니다.

현상:

원인: 컴퓨터 디스플레이의 스케일링으로 인해 발생했으며 이는 Google 브라우저와 360 브라우저 모두 웹킷 커널이 있는 것으로 나타났습니다. 360 브라우저는 정상적으로 표시되지만 이 문제는 Google 브라우저에서만 발생합니다.

해결책

프로젝트 항목 파일 찾기(칠판에 강조!!), 전역 스타일 추가:

.el-table th.gutter{
    display: table-cell!important;
}

효과:

눈에 더 좋아보이네요~

element-ui 테이블 스타일 무질서 조정

element-ui 테이블을 vue에 캡슐화한 다음 슬롯, 고정 위치 지정 등을 사용하여 스타일 혼란을 해결하는 방법은 다음과 같습니다.

1.

글로벌 스타일에서 이렇게 코드를 작성하세요

/* Element-UI 的table 组件出现表格线条不对齐的问题 */
body .el-table th.gutter {
    display: table-cell !important
}

2. 고정으로 인한 높이 문제

글로벌 스타일에서 다음 코드를 작성하세요

.el-table__fixed-right{
    height: 100% !important;
}

3 배경색 이벤트를 수정하려면 마우스 오버를 제거하세요

.

/* 去掉鼠标hover事件 */
/* tr {
    pointer-events: none;
} */

추천 학습: " vue 비디오 튜토리얼》

위 내용은 Vue 헤더가 잘못 정렬된 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!