在 VueJs 中处理大数据

Question

I currently have large list which holds around 1k+ records and these records are bind to table. The table also consists of input elements like textbox, dropdown which are used to update the list data. The problem now is obviously regarding performance when the list is bind to DOM and it's also sluggish during scrolling. Is there anything that can be improved?, I don't want to use pagination and also can't use virtual-scroll as i have input elements as they would trigger update event. Here's just an example:

 new Vue({ el: '#app', data: { bigData: new Array(100000) } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script> <div id="app"> <table> <thead> <tr> <td>Id</td> <td>Random Text</td> </tr> </thead> <tbody> <tr v-for="(item, index) in bigData"> <td>{{ index }}</td> <td><input type="text" v-model="index"><td> </tr> </tbody> </table> </div>

Answer 1

I had a similar problem, after lots of testing, I came to the conclusion its the best to use pages in combination with filters. (I had 5*100 inputs.)

The problem is that your browser start lagging because the JS and HTMl to parse just gets much.