vue 빅 데이터 시트 카드 문제 의 완벽 한 해결 방안

머리말
vue 렌 더 링 작은 데이터 가 빠 르 고 빅 데이터 vue 에 카드 가 걸 리 기 시 작 했 습 니 다.본 고 는 vue 빅 데이터 표 의 카드 문제 에 대한 해결 방법 을 상세 하 게 소개 합 니 다.
온라인 체험 데모 클릭(컴퓨터 로 확인 하 세 요)
애플 컴퓨터 를 직접 테스트 하고 chrome 브 라 우 저 는 카드 가 걸 리 지 않 습 니 다.다른 브 라 우 저 는 테스트 하지 않 았 습 니 다.만약 에 카드 가 걸 리 면 시스템 과 브 라 우 저 를 준비 하여 제 가 후속 적 으로 최적화 할 수 있 도록 해 주 십시오.감사합니다.
먼저 효 과 를 보 세 요.총 1000 X 100=10W 개의 셀 은 기본적으로 카드 가 걸 리 지 않 습 니 다.또한 각 셀 을 클릭 하면 편집 이 가능 하고 고정 헤드 와 고정 열 을 지원 합 니 다.
프로젝트 소스 코드 주소Github ( 로 컬 다운로드 )
문제 해결 핵심 점:가로 스크롤 로드,세로 스크롤 로드
프로젝트 배경
필 자 는 최근 에 광고 배정 기능 을 하고 있 기 때문에 점 위 를 미리 차지 해 야 한다.큰 계약 은 여러 개의 자원 에 대해 배정 해 야 할 수도 있 고 주기 가 몇 년 이 될 수도 있다.그리고 우리 의 페이지 상호작용 은 이렇다.
가로 매달 30 개의 칸,최대 3 년,36 개 월,행 당 36*30=1080 개의 칸
100 개의 자원 을 세로 로 설정 합 니 다.모두 10 W 개의 셀 입 니 다.그 다음 에 각 셀 안에 하나의 입력 상자,하나의 재고 총수 가 있 기 때문에 총 수 는 20W 개 입 니 다.내부 네트워크 에서 사용 합 니 다.인터페이스 요청 은 문제 가 되 지 않 습 니 다.브 라 우 저 로 렌 더 링 을 할 수 있 으 면 인 터 페 이 스 를 견 디 지 못 하고 돌아 온 후에 몇 십 초 동안 흰색 화면 이 나 옵 니 다.전체 페이지 는 카드 가 죽은 상태 에 있 습 니 다.
이것 은 아직 계산 하지 않 습 니 다.불 러 온 후에 페이지 작업 도 매우 끊 기 고 미끄럼 지연 이 심각 하 며 페이지 가 기본적으로 마비 상태 에 있 습 니 다.
기 존의 기능 은 jquery 를 바탕 으로 개발 한 것 으로 프로젝트 재 구성 에 사용 되 는 vue 이 고 UI 는 Element UI 를 사 용 했 습 니 다.Elment UI 의 표 는 데이터 양 이 많 고 심각 한 성능 문제 가 있 습 니 다.가장 직접적인 표현 은 바로 흰색 화면 시간 이 길 고 렌 더 링 오류 가 발생 할 수 있 습 니 다.
그래서 스스로 표를 만들어 서 카드 문 제 를 해결 하려 고 했 어 요.
사고의 방향 을 실현 하 다.
표 분할,동적 로드
표 는 가로로 월 별로 나 누 어 매달 하나의 table,월 table 외층 에 차지 하 는 div 를 놓 고 가로 스크롤 위치 제어 에 따라 보 여 줍 니 다.
세로 방향 은 자원 에 따라 분할 되 고 똑 같이 하나의 자리 차지 div 를 감 싸 며 스크롤 위치 에 따라 동적 으로 로드 되 며 dom 수량 을 계속 유지 합 니 다.
동적 편집,필요 에 따라 편집 입력 상자 생 성
서로 다른 탭 은 브 라 우 저 에서 렌 더 링 할 때 성능 이 다 릅 니 다.예 를 들 어 input 같은 탭 은 span 등 탭 보다 훨씬 무 겁 기 때문에 화면 을 가득 채 울 수 없습니다 input
프로젝트 는 셀 을 누 르 면 입력 상 자 를 보 여 줍 니 다.초점 을 잃 어 버 렸 습 니 다.디 스 플레이 제어 가 아 닌 v-if 제어 dom 가 불 러 올 지 여부 입 니 다.
코드 분해
고정 헤드

<div class="table-head">
  <div class="module"
  v-bind:style="{ transform: 'translateX(' + scrollLeft + 'px)' }" 
  v-for="(item, index) in monthData" v-bind:key="index">
  <table cellspacing="0" cellpadding="0">
  <thead>
  <tr>
   <td colspan="30">{{item.month}}</td>
  </tr>
  <tr>
   <td width="100" 
   v-for="(d_item, d_index) in item.days" v-bind:key="d_index"
   style="min-width:100px">{{d_item}}</td>
  </tr>
  </thead>
  </table>
  </div>
 </div>

고정 열

 <div class="table-fix-cloumns">
  <div class="module fix-left-top">
  <table width="100" cellspacing="0" cellpadding="0">
  <thead>
  <tr>
   <td>  </td>
  </tr>
  <tr>
   <td>position</td>
  </tr>
  </thead>
  </table>
  </div>
  <div class="module" v-bind:style="{ transform: 'translateY(' + scrollTop + 'px)' }">
  <table width="100" cellspacing="0" cellpadding="0">
  <thead>
  <tr v-for="(item, index) in projectData" v-bind:key="index">
   <td>{{item.name}}</td>
  </tr>
  </thead>
  </table>
  </div>
 </div>

표 체

<div class="table-body" @scroll="tableScroll" style="height: 300px">
  <div class="module" 
  style="width:3000px;"
  v-for="(item, index) in monthData" v-bind:key="index">
  <div class="content" 
  v-if="Math.abs(index - curModule) < 3">
  <div class="row"
  style="height:30px"
  v-for="(p_item, p_index) in projectData" 
  v-bind:key="p_index">
  <table width="3000"
   v-if="Math.abs(p_index - curRow) < 20"
   cellspacing="0" cellpadding="0">
   <tbody>
   <tr>
   <td 
   @click="clickTd(p_index,item.month, d_item, $event)" 
   v-for="(d_item, d_index) in item.days" v-bind:key="d_index">
   <span v-if="!originProjectData[p_index][''+item.month][''+d_item]['show']">{{originProjectData[p_index][''+item.month][''+d_item]['last']}}</span>
   <input
   @blur="blurTd(p_index,item.month, d_item)"
   v-if="originProjectData[p_index][''+item.month][''+d_item]['show']"
   v-model="originProjectData[p_index][''+item.month][''+d_item]['last']"
   v-focus="originProjectData[p_index][''+item.month][''+d_item]['focus']"/>
   </td>
   </tr>
   </tbody>
  </table>
  </div>
  </div>
  </div>
 </div>

위의 최 적 화 를 통 해 표 의 끊 김 문 제 를 완벽 하 게 해결 하 였 으 나,나 는 구성 요 소 를 밀봉 하지 않 았 다.이 유 는 다음 과 같다.
・플러그 인 패 키 징 후 많은 제한 이 있 습 니 다.vue 와 같은 템 플 릿 으로 작성 할 수 없습니다.json 으로 데 이 터 를 전송 하면 사용자 정의 내용 이 원활 하지 않 습 니 다.
・자신의 응용 장면 에 따라 자체 적 으로 수정 하고 확장 할 수 있 으 며,코드 는 이미 간결 합 니 다.
게으르다
만약 당신 이 비슷 한 수요 가 있다 면 나 에 게 이것 을 시험 해 보 세 요.스타 도 환영 합 니 다.
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.