iview table 고도 동적 설정 방법

iview table 표 구성 요 소 를 사용 할 때 제 화면 해상도 가 비교적 높 기 때문에 자신의 pc 기기 에 설 치 된 고정 높이 가 적합 합 니 다.테스트(test)할 때 다른 단말기,예 를 들 어 1368*768 의 기계 에 모두 표시 되 지 않 은 것 을 발 견 했 습 니 다.다음은 제 것 과 다른 기계 의 효과 도 를 비교 해 보 겠 습 니 다.그림 과 같 습 니 다.
내 기계

2.남 의 기계

해결 방법
그 이 유 는 표 의 높이 가 고정 되 어 있 기 때문에 큰 해상도 에서 화면 을 표시 할 수 있 고 작은 해상도 의 화면 이 불완전 하 게 표시 되 기 때문에 우 리 는 동태 적 으로 표 의 높이 를 설정 해 야 한다.설정 방법 은 다음 과 같다.
1.iview table 의 쓰기:

<Table highlight-row border :columns="columns7" :data="data6" ref="table" :height="tableHeight"></Table> 
2.높이 설정,초기 화 시 설정
(1)우선 data 에서 초기 화

tableHeight: 450, 
(2)초기 화

mounted() { 
 //        
 this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160 
 }, 
window.inner Height 는 브 라 우 저의 사용 가능 한 높이 입 니 다.this.$refs.table.$el.offsetTop 은 표 거리 브 라 우 저 에서 사용 가능 한 높이 상단 의 거리 입 니 다.그러면 동적 설정 을 완성 할 수 있 습 니 다.그러면 모든 pc 엔 드 화면 에 적응 할 수 있 습 니 다.
이상 의 이 iview table 고도 동적 설정 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기