v-for 过多页面卡顿

293 阅读1分钟

卡到 滚动条也动不了

image.png

卡顿.gif

image.png

我把v-for 取消了几个确实流畅了很多

image.png

不卡.gif

罪魁祸首 el-image 换image

   <el-image style="width: 60px; height: 60px;border-radius: 4px;" :src="filterImg(son.productPic)"
                                fit="cover" />

v-for 改成方法返回

     <span style="font-size: 14px; " v-for="(child, childIndex) in son.spData"
                                    :key="childIndex">{{ child.value }}{{ childIndex === son.spData.length - 1 ? '' :
                                        '/' }}</span>
const specificationsData = (spData: SpData[]): string => {
    let strArr = [] as any
    if (spData && spData.length) {
        strArr = spData.map(item => item.value)
    }
    return strArr.join('/')
}