엘 테이블에서 ElementUi 탭 효과

우리는 페이징을 사용할 필요가 있으므로 현장의 현실은 매우 자주, 더 나은 사용자 경험을 위해 과도한 형태 엘 - 테이블 데이터를 경험 할 수는 일반적으로 데이터 크기의 양에 따라 달라집니다 페이징 프런트 엔드로 구분 백엔드 제어 제어 할 수 있습니다.

효과 봐 (탈감작 치료를 관련이있다)

원위 엘 테이블 탭 렌더링

변화를 설명하기 위해 여기에 예 ElementUi 공식 넣어

< 템플릿 > 
    < EL 테이블
         : 데이터 = "tableData.slice ((currentPage-1) * 페이지 크기, 페이지 크기 currentPage *)" 
        : 스트라이프 = "스트라이프" 
        : 전류 page.sync = "currentPage" 
        스타일 = "폭 : 100 % " > 
        < EL 테이블 칼럼
             소품 ="날짜 " 
            라벨 ="日期" 
            폭 ="180 " > 
         </ EL 테이블 칼럼 > 
         < EL 테이블 칼럼
             소품 ="이름 " 
            라벨 ="姓名"
            폭 = "180" > 
         </엘 테이블 컬럼 > 
         < 엘 테이블 열
             소품 = "주소" 
            라벨 = "地址" > 
         </ 엘 - 테이블 컬럼 > 
    </ 엘 테이블 > 
    < DIV 클래스 = "매김" > 
        < 엘 매김
             @ 크기 변화 = "handleSizeChange" 
            @ 전류 변화 = "handleCurrentChange" 
            : 페이지 사이즈 = "[10, 15, 20] ' 
            : 페이지 크기 ="페이지 크기 " 
            레이아웃 ="총 크기, 이전, 페이저,이어서, 점퍼 "
            : 총 =를 "총"> 
    </ 엘 매김 > 
</ 템플릿 >

<script> 
내보내기 기본 { 
    데이터 () { 
        창 { 
            스트라이프 : 사실 , //是否为斑马纹테이블 
            tableData [] 
            currentPage : 1 , 
            페이지 크기 : 10 , 
            합계 : 0 , 
        } 
    } 
    방법 { 
        handleSizeChange (발) { 
            이 .pagesize = 브로; 
        } 
        handleCurrentChange (발) { 
            이 .currentPage = 브로; 
        } 
    } 
}
 <script>

코어는 tableData.slice 페이징한다 ((currentPage-1) * 페이지 크기, 페이지 크기 currentPage *)이도 2에 도시 된 방법 분열 tableData 소스 있지만 실제로 모든 요청 된 데이터를 데이터 조각을 사용하여 코드 후 앞 페이지가 표시 가짜를 실현.

도 2 tableData 실제 요구를 모든 데이터 (13)의 데이터

또 다른 아이디어는 배경을 말하고, 파라미터 currentPage 및 페이지 크기로 전달 백그라운드 값 페이징 우리가 필요 [(currentPage-1) * 페이지 크기, currentPage * 페이지 크기] 데이터 이렇게 연속적이 간격.

두 가지 방법 모두 장단점이있는 경우 이전 페이징 제어 방법의 프론트 엔드, 본질적으로하기 때문에 요청이 모든 데이터 , 데이터는 첫 페이지의 수백, 수천 또는 데이터의 수천 수만, 테이블을 포함하는 매우 큰 경우 , 메모리 공간도 매우 친절 아주 나쁜입니다 그것의 데이터가 사용자 경험을 인수하기 위해 백업하기 때문에 로딩 시간이 매우 느려집니다. 데이터 명확하게 보여줍니다에만 수십하지만,이 목적을 위해 수십 데이터 조각의 수천을 저장, SQL 문을 같은 * 선택에서 더 나은 것 후자의 같은 명백한 효율성에서 [필수 필드]를 선택합니다. 혜택은 적은 양의 데이터의 경우는, 사용자의 테이블 부하 속도의 첫 페이지는 사용자가 스위치 페이지에 버튼을 클릭 한 후, 수락하거나 요청을 시작할 필요가없는 페이지로 바로 이동할 수있는 경우 그러나,도 좋다 매우 빠르고, 데이터를 표시합니다.

후자의 경우 매김의 백 - 엔드 제어, 당신은 페이지의 모든 후, 생선, 곰의 발 모두를 가질 수 없습니다, 요청을 시작했다 전환 할 때마다하는 동안, 우리는 실제 상황과 사용자 요구 사항에 따라 조정할 수 있습니다.

엘 테이블에서 ElementUi 탭 효과

추천