Javascript 使用Vue Js数据绑定需要一段时间

我是Vue JS的新手。所以我只制作了一个组件，它像网格一样重复一个部分。但我的问题是，当我在网格中添加下拉列表时，它占用了太多的时间。记录可能会增加下一次然后加载时间也会增加，所以我正在寻找一个解决方案，使页面加载时间将减少。 下面是我在代码中使用的一个示例

var-obj=[]； 对于var i=0；i<4000；i++{ var subobj=[]； 对于var j=0；j<100；j++{ 推{ id:j， 姓名：“穆克什” } } var newobj={ “年份”：2018年， "月份":01,， “出售”：512， drp:subobj， 姓名：negi } obj.pushnewobj； } 新Vue{ el:tableDemo， 数据：{ 销售：obj } } 月 出售 顾客 顾客 顾客 {{sale.Month} {{sale.sale} -挑选- {{d.name} -挑选- {{d.name} -挑选- {{d.name} 第一个复选框

---

您正在创建4000*3个选择元素，每个元素有100个选项元素。考虑下面的代码，这是不可知的。它的运行时与发布的VueJS代码相当

for(let i = 0; i < 4000 * 3; i++){
    let select = document.createElement("select");
    document.body.appendChild(select);
    for(let j = 0; j < 100; j++){
        let option = document.createElement("option");
        option.text="mukesh";
        select.add(option);
    }
}

另一种方法是让用户选择他们首先想要的4000个销售中的哪一个，然后允许用户进行选择。

HTML

JS

---

嗨，在做了大量的研发之后，我找到了一个解决方案。i、 e.在Vue js中使用vuetify。 它就像一个符咒。我已经添加了50000行，它的渲染时间为4秒。您可以将数据增加到500000，几乎不需要10秒。 如您所见，当前渲染数据的复杂度为50000*300

严格使用； var d=新的Vue{ el:“应用程序”， vuetify：新的vuetify， 数据：函数数据{ 返回{ 项目：[]， drpItems:[]， itemsPerPage:0， 选项长度：6， 加载：对， 页脚道具：{ “每页项目选项”：[10,20,50,100,1000] }, 标题：[{ 文本：“ID”， 值：“id” }, { 文字：“说明”， 值：“说明” }, { 文本：“QTY1”， 值：“qty1” }, { 文本：“QTY2”， 值：“qty2” }, { 文本：“Qty3”， 值：“qty3” }], 客户：{ 名称：'客户'， 项目：[] } }; }, 已创建：已创建函数{ 这是初始化； var self=这个； window.onresize=函数事件{ 自我更新； }; }, 方法：{ updateTable：函数updateTable{ var tableHeight=document.getElementById'dataTable'。offsetHeight； this.itemsPerPage=parseInttableHeight/40； 如果this.customer.items.length您正在创建4000个元素。这在任何框架中都会很慢。在jquery中，我使用了不同的方法，它工作得非常好。它工作得很好，但您的代码只返回一行。我需要一张桌子

<div id="tableDemo">
    <select v-model="selected_sale">
        <option v-for="(sale,i) in sales" :key="i">
            {{i}}
        </option>
    </select>
    {{selected_sale}}
     <table class="table table-striped">
        <thead>
            <tr>
                <th>Month</th>
                <th>Sale</th>
                <th>Customer</th>
                <th>Customer</th>
                <th>Customer</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">{{ sale.Month  }}</th>
                <td>{{ sale.Sale }}</td>
                <td>
                    <select v-model="sale.name">
                        <option value="--Selected--">--Select--</option>
                        <option v-for="d in sale.drp" :value="d.name">{{d.name}}</option>
                    </select>
                </td>
                <td>
                    <select v-model="sale.name">
                        <option value="--Selected--">--Select--</option>
                        <option v-for="d in sale.drp" :value="d.name">{{d.name}}</option>
                    </select>
                </td>
                <td>
                    <select v-model="sale.name">
                        <option value="--Selected--">--Select--</option>
                        <option v-for="d in sale.drp" :value="d.name">{{d.name}}</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <label class="control control--checkbox">
        First checkbox
        <input type="checkbox" checked="checked" />
        <div class="control__indicator"></div>
    </label>
</div>

let start = Date.now();
    var obj = [];
    for (var i = 0; i < 4000; i++) {
        var subobj = [];
        for (var j = 0; j < 100; j++) {
            subobj.push({
                id: j,
                name: 'mukesh'+j
            })
        }
        var newobj = {
            'Year': 2018,
            'Month': i,
            'Sale': 512,
            drp: subobj,
            name: "negi"
        }
        obj.push(newobj);
    }
    let end = Date.now();
    console.log(end - start);
    new Vue({
        el: "#tableDemo",
        data: {
            sales: obj,
            selected_sale:0,
        },
        computed:{
            sale(){
                return this.sales[+this.selected_sale];
            }
        }
    })