element-ui 의 table 열 숨 김 문제 해결
2381 단어 element-uitable열 숨 김
하지만 엘 레 멘 트-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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
element-ui 대화상자 기반el-dialog 초기화 검사 문제 해결페이지를 새로 고치지 않고 el-dialog를 다시 열 때, rules나 어떤 값을 연결하려면required가 필요합니다. 자동으로 검사됩니다. 여러 개의 블로그를 살펴본 결과, 자주 사용하는 두 가지 해결 방법이 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.