vue一次加载大量数据导致页面卡顿解决

• Z时代
• 2024-01-10
• 分类：综合

前提：后端返回一个几千条的数组，页面直接渲染导致非常卡顿。

解决方案：使用vue-virtual-scroller 插件解决；https://www.npmjs.com/package/vue-virtual-scroller#page-mode

第一步：安装

npm install --save vue-virtual-scroller

第二步：引入（也可以局部引入）

import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import virtualScroller from "vue-virtual-scroller";
Vue.use(virtualScroller);

第三步：页面使用

      <!-- 明细列表部分 -->
      <div class="list_count" style="height:400px;">
        <RecycleScroller v-if="invoiceListflag" :items="invoiceList" :emitUpdate="true"  class="scroller" :item-size="49" key-field="idKey" >
                <template slot="before">
                    <div class="thead">
                        <div class="tr">
                            <span  class="td" v-for="(itemsa,indexsa) in tableTitle" :key="indexsa+'title'"  :class="{'width200':indexsa ==1|| indexsa ==2}">{{itemsa.title}}</span>
                        </div>
                    </div>
                </template>
                <template v-slot="{ item,index }">
                    <div  class="tbody">
                        <div class="tr" :key="index+'asdsds'">
                            <span class="td">{{item.id}}</span>
                            <span class="td width200">
                                <el-select v-model="item.invoiceType" style="width:156px;" placeholder="请选择" @change="changeType(item,item.id,1)">
                                    <span slot="prefix" :class="{'zhuan':item.invoiceType == '00','pu':item.invoiceType =='02'}"></span>
                                    <el-option
                                    v-for="items in options"
                                    :key="items.value"
                                    :label="items.invoiceTypeName"
                                    :value="items.invoiceType">
                                    </el-option>
                                </el-select>
                            </span>
                            <span class="td width200">
                                <el-select v-model="item.goodsName" style="width:156px;" placeholder="请选择"  @change="changeType(item,item.id,2)">
                                    <el-option
                                    v-for="items in opParams[item.invoiceType]"
                                    :key="items.goodsName+'asd'+Math.random()"
                                    :label="items.goodsName"
                                    :value="items.goodsName">
                                    </el-option>
                                </el-select>
                            </span>
                            <span class="td">{{item.invoiceEditionDesc}}</span>
                            <span class="td">{{item.goodsQuantity}}</span>
                            <span class="td">{{item.goodsPrice}}</span>
                            <span class="td">{{item.goodsAmount}}</span>
                            <span class="td">{{item.taxRate}}%</span>
                            <span class="td">{{item.goodsTax}}</span>
                            <span class="td" >
                                <el-input-number class="inputWidth" :class="{'errorColor':changeErrorColor(item)}" :min="0" controls-position="right" v-model="item.taxAmount" @change="checkPrice(item,item.id)"  placeholder="请输入金额"></el-input-number>
                                <span v-if="changeErrorColor(item)"></span>
                            </span>
                            <span class="td"><span v-if="invoiceList.length>1" class="del" @click="delList(item,item.id)">删除</span></span>
                        </div>
                    </div>
                </template>
                <!-- </tbody>
            </table> -->
        </RecycleScroller>
      </div>

View Code

<style lang='css'>
.scroller {
  height: 100%;
}
.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.invoiceAdd__detail_warp .list_count .vue-recycle-scroller__item-wrapper {
    overflow: initial;
}
.invoiceAdd__detail_warp .list_count  .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
    width: inherit;
}
</style>

View Code

备注：

　　1:父元素一定要设置高度；

　　2:key-field="idKey"//key-field 默认是id属性这里一定要传递一个不重复的值进行区分；

　　3::item-size="49" //是每一条数据的高度

　　4:items //数组列表

以上是 vue一次加载大量数据导致页面卡顿解决 的全部内容， 来源链接： utcz.com/z/378520.html