element-ui 의 table 열 숨 김 문제 해결

element-ui 의 table 과 boottstrap 의 table 설정 은 어느 정도 차이 가 있 습 니 다.이전에 boottstrap 으로 만 든 표 는 짧 은 열 과 상세 한 열 로 전환 하려 고 합 니 다.상세 열 이 너무 많아 서 스크롤 바 를 당 기 는 데 아직 거리 가 있 습 니 다.그래서 짧 은 열 로 전환 하면 비교적 중요 한 몇 열의 내용 을 편리 하 게 볼 수 있 기 를 바 랍 니 다.이전 방법 으로을 사용 하면 매우 간단 합 니 다.display 의 표시 와 숨 김 을 직접 설정 하면 됩 니 다.
하지만 엘 레 멘 트-ui 에 넣 으 면 안 돼 요.모든 열 에 스타일 을 직접 설정 할 수 없습니다.모든 열 에 class-name 을 설정 하여 스타일 을 설정 하면 문제 가 있 을 수 있 습 니 다.각 열 에 있 는 class-name 의 스타일 은 cell 스타일 에 감 싸 여 있 기 때 문 입 니 다.예 를 들 어 class-name 에 width 를 설정 하려 면 외부 용기 cell 이 변 하지 않 고 안의 내용 의 width 가 변 하면 내용 은 뒤의 열 에 덮 여 있 고 다른 사람 을 밀어 내 고 자신 이 자 리 를 차지 합 니 다.페이지 가 혼 란 스 러 워 집 니 다.멀리 떨 어 진 것 같은 데..
디 스 플레이 와 숨 김 으로 돌아 가 element-ui 의 table 에서 특정한 열의 숨 김 과 디 스 플레이 를 제어 합 니 다.생각 나 는 것 은 v-show 를 사용 하 는 것 입 니 다.하지만 전에 사용 해 서 는 안 되 고 소 용이 없습니다.뒤에 인터넷 에서 찾 아 보 니 v-if 를 사용 하 는 것 이 가능 하 다 는 것 을 발견 했다.왜 그런 지 에 대해 서 는 나 도 말 할 수 없다.그래서 이렇게 되 었 다.
(단계 1)

다른 숨 기 고 싶 은 열 에 v-if='show'를 직접 넣 으 면 된다.

이 두 가지 방법 은 두 개의 짧 은 열 과 상세 한 열 버튼 의 click 이벤트 입 니 다.데이터 쇼 의 true 인지 false 인지 제어 합 니 다.
네,여기까지 입 니 다.첫 번 째 단계 표 열의 숨 김 과 표시 가 성 공 했 습 니 다.다음 문 제 는 특정한 열의 내용 이 너무 많다 고 가정 하고 위의 단계 의 모든 셀 은 너비 width 를 설정 하지 않 았 다 는 점 을 기억 해 야 한 다 는 것 이다.그래서 모든 칸 의 너 비 는 같다.이 내용 이 매우 많은 일렬 이 매우 길 어 보 여서 보기에 정말 짜증스럽다.좋아,그럼 그 에 게 width 를 설정 해 줘.이 내용 이 너무 많은 열 에 widht:180 을 설정 해 줘.
응,효과 가 생 겼 어.다시 전환 기능 을 시도 해 봐.카드!뜻밖의 문제 가 발생 했다.칸 의 폭 이 뜻밖에도 매우 커 졌 다.스크롤 바 도 끝 이 안 나.이것 은 매우 걱정 스 러 운 사람 이다.디 스 플레이 와 숨 김 을 전환 하 는 것 이 왜 이런'놀 라 움'효 과 를 가 져 왔 는 지 전혀 모르겠다.어 쩔 수 없 이 천천히 해결책 을 찾 아 보 자.끊 임 없 는 시도 에서 나 는 셀 이 폭 을 설정 한 후에 한 열 만 v-if:"show"를 사 용 했 을 때 모든 것 이 정상 이라는 것 을 알 게 되 었 다.v-if:"show"를 여러 열 로 사용 하면 문제 가 발생 합 니 다.이 길 을 따라 생각 하 다.결국 나 는 v-if 하나만 나 오 는 거 아니 야?숨겨 야 할 몇 열 을 모두 용기 로 감 싸 라.용기 에 표시 하고 숨 기 면 되 겠 지 요?다음 과 같 습 니 다.

응,해 봐~~,그래,모든 게 정상 으로 돌 아 왔 어!이런 방법 을 사용 할 수 있다.
PS:element-ui 의 table 열 초과 부분 생략 및 부상 알림

<el-table-column :show-overflow-tooltip="true">
</el-table-column>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기