vue项目大量数据渲染页面优化—vue-virtual-scroll-list插件


0. git库：https://www.npmjs.com/package/vue-virtual-scroll-list

1. 下拉列表数据很多时的优化渲染：引入vue-virtual-scroll-list插件。通过每次只渲染指定条数，比如6条，即使下拉列表中有上千条数据，也能很每次只渲染6条，从而减少渲染，优化页面，其他隐藏的滚动部分就做个虚假的滚动高度 ，但是不渲染数据。

1.1 下载：npm install --save vue-virtual-scroll-list。

1.2 使用：iview的下拉/多选框组件的中大量数据的使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    import VirtualList from 'vue-virtual-scroll-list'
    components:{
        VirtualList
    }
</script>
<!--:size='30' 表示行高30px :remain='6'表示页面只每次渲染6条-->
<Select>
    <VirtualList :size='30' :remain='6'>
        <Option v-for="(item,index) in list" :key='index'>{{item.label}}</Option>
    </VirtualList>
</Select>

<CheckboxGroup>
    <VirtualList :size='30' :remain='6'>
        <p v-for="(item,index) in list" :key='index' style='height:300px'>
            <Checkbox :label='item.value'>
                <Icon type='logo-twitter'></Icon>
                <span>{{item.label}}</span>
            </Checkbox>
        </p>
    </VirtualList>
</CheckboxGroup>