el-table數據多頁面卡, 改用展開行(自用)

原因:頁面是20條數據, 而且是合並單元格(里面兩次循環). 接口返回的很快, 但是items數據比較龐大300-2000條,.

合並單元格之前需要循環處理數據, 導致頁面除了table外的其他地方也比較卡. 

嘗試:試過網上其他的但是都不湊效, <pl-table>是很流暢, 但是只適合沒有合並的表格.

 

不得已的解決辦法:

①最后只能改為展開行顯示(數量大且合並單元格的, 需要跟產品商量樣式, 以后遇到也要有印象!!!!!)

②每個頁面渲染10條數據

 

 

代碼結構:

column1和column2 在數據那里定義

 <el-row>
      <el-table
        v-loading="loading"
        size="small"
        :data="tableData"
        ref="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        max-height="600"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <!-- 子table -->
            <el-table
              size="small"
              :data="props.row.items"
              tooltip-effect="dark"
              style="width: 100%"
              border
              stripe
              max-height="600"
            >
              <el-table-column
                v-for="(item, index) in column2"
                :key="index"
                :label="item.title"
                :prop="item.key"
                align="center"
                :fixed="item.fixed"
                :min-width="item.width ? item.width : 120"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in column1"
          :key="index"
          :label="item.title"
          :prop="item.key"
          align="center"
          :fixed="item.fixed"
          :min-width="item.width ? item.width : 120"
        >
        </el-table-column>
      </el-table>
    </el-row>

 

 

 其他參考

①pl-table地址,他們推廣的比較多: https://developer.aliyun.com/mirror/npm/package/pl-table

 

②其他參考https://forum.vuejs.org/t/element-ui-table/32859/32