elementui에서 테이블 구성 요소의 빅 데이터 렌더링에는 심각한 성능 지연 문제가 있습니다.

elementui의 테이블 구성 요소는 많은 양의 데이터에 직면하여 렌더링할 때 심각한 성능 지연이 발생합니다.인터넷에도 지연 로딩, 가상 로딩 등과 같은 많은 솔루션이 있습니다. 여기에서 우회를 피하기 위해 직접 이동하십시오. 궁극의 빅 솔루션:구성 요소를 조기에 변경하고 지금 구성 요소를 변경하고 지금 구성 요소를 변경하십시오! ! !

여기서 추천하는 elementUI의 테이블 컴포넌트를 대체할 수 있는 라이브러리는 umy-ui 입니다.

유미 소개

umy-ui 라이브러리의 테이블 구성 요소는 바퀴를 만들지 않습니다. element-ui 및 기타 라이브러리의 테이블 구성 요소를 변환합니다. 대용량 데이터 테이블 렌더링을 해결하는 핵심 방법은 가상 테이블 입니다.

용법

설치하다:

npm install umy-ui

main.js(모든 가져오기 방식에 따라 이 문서에서 소개됨):

import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';

Vue.use(UmyUi);

vue 문건:

<u-table
        :header-cell-style="headerStyle" 
        :height="tableHeight"
        :row-height="rowHeight"
        @selection-change="selectionChange"
        use-virtual 
        ref="tableRef"
        :data="tableData">
        <u-table-column label=" " type="index" fixed="left"></u-table-column>
        <u-table-column
            type="selection"
            fixed="left"
            width="55">
        </u-table-column>
        <u-table-column
            prop="id"
            label="id"
            width="100"
        ></u-table-column>
        <u-table-column
            :label="操作"
            width="140"
            fixed="right"
        >
            <template slot-scope="scope">
              <span class="spanBtn" @click="view(scope.row)">查看</span>
            </template>
        </u-table-column>
</u-table>

data() {
    
    
    return {
    
    
      rowHeight: 60,
      tableHeight: window.innerHeight - 420,
      headerStyle: {
    
     // 表头样式
        backgroundColor: "#d9d9d9",
        fontSize: "14px",
        fontWeight: 900,
        color: "#333"
      },
      tableData: []
    }
}

주의점:

height: 테이블의 전체 높이입니다. height 또는 maxheight가 지정되지 않거나 0이 지정되면 use-virtual이 바로 닫힙니다.
use-virtual: 전체 테이블의 핵심이며 이 속성을 추가하면 가상 테이블을 시작하면 데이터 렌더링 지연 문제를 해결할 수 있습니다.
row-height: use-virtual이 활성화되지 않은 경우 필요하지 않습니다. 임의의 높이, td 사용 tr의 높이가 우선합니다. 그렇지 않으면 테이블 계산이 올바르지 않습니다.row-height는 테이블 행 높이를 설정하는 것이 아니라 테이블에서 무언가를 계산하기 위한 것입니다.. 행 높이를 변경해야 하는 경우 css를 작성하여 td의 높이를 변경해야 합니다! )

테이블 렌더링의 탈구에 대한 해결책

watch: {
    "tableData" (val) {
      this.$nextTick(() => {//修复表格错位
        this.$refs.tableRef && this.$refs.tableRef.doLayout()
      })
    }
  },