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的下拉/多選框組件的中大量數據的使用。

<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>