第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

使用 Vue Js 數(shù)據(jù)綁定需要一些時(shí)間

使用 Vue Js 數(shù)據(jù)綁定需要一些時(shí)間

慕碼人2483693 2022-10-08 15:45:40
我是 Vue JS 的新手。所以我只做了一個(gè)組件，它像網(wǎng)格一樣重復(fù)一個(gè)部分。但我的問題是，當(dāng)我在網(wǎng)格中添加下拉菜單時(shí)，會(huì)花費(fèi)太多時(shí)間。下次記錄可能會(huì)增加，然后加載時(shí)間也會(huì)增加，所以我正在尋找一個(gè)解決方案，這樣頁面加載時(shí)間就會(huì)減少。這是我在代碼中使用的示例。var obj = [];for (var i = 0; i < 4000; i++) {    var subobj = [];    for (var j = 0; j < 100; j++) {        subobj.push({            id: j,            name: 'mukesh'        })    }    var newobj = {        'Year': 2018,        'Month': 01,        'Sale': 512,        drp: subobj,        name: "negi"    }    obj.push(newobj);}new Vue({    el: "#tableDemo",    data: {        sales: obj    }})<script src="https://npmcdn.com/vue/dist/vue.js"></script><div id="tableDemo">    <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 v-for="(sale,i) in sales" :key="i">                <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>
查看完整描述

2 回答

?
鳳凰求蠱

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊

您正在創(chuàng)建 4000*3 個(gè)選擇元素，每個(gè)元素有 100 個(gè)選項(xiàng)元素?？紤]以下與庫無關(guān)的代碼。它具有與發(fā)布的 VueJS 代碼相當(dāng)?shù)倪\(yùn)行時(shí)間。


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 個(gè)銷售中的哪一個(gè)，然后允許用戶進(jìn)行選擇。 代碼筆


HTML


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

JS


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

            }

        }

    })


查看完整回答
反對(duì) 回復(fù) 2022-10-08
?
繁花不似錦

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊

嗨，經(jīng)過大量研發(fā)后，我找到了一種解決方案。即 Vue js 中的 Vuetify。它就像一個(gè)魅力。我添加了 50000 行，它在 4 秒內(nèi)呈現(xiàn)。您可以將數(shù)據(jù)增加到 500000，幾乎不需要 10 秒。如您所見，當(dāng)前渲染數(shù)據(jù)的復(fù)雜度為 50000* 300


"use strict";


var d = new Vue({

  el: '#app',

  vuetify: new Vuetify(),

  data: function data() {

    return {

      items: [],

      drpItems: [],

      itemsPerPage: 0,

      optionsLength: 6,

      loading: true,

      footerProps: {

        'items-per-page-options': [10, 20, 50, 100, 1000]

      },

      headers: [{

        text: 'ID',

        value: 'id'

      }, {

        text: 'Description',

        value: 'description'

      }, {

        text: 'QTY1',

        value: 'qty1'

      }, {

        text: 'QTY2',

        value: 'qty2'

      }, {

        text: 'Qty3',

        value: 'qty3'

      }],

      customer: {

        name: 'customer',

        items: []

      }

    };

  },

  created: function created() {

    this.initialize();

    var self = this;


    window.onresize = function (event) {

      self.updateTable();

    };

  },

  methods: {

    updateTable: function updateTable() {

      var tableHeight = document.getElementById('dataTable').offsetHeight;

      this.itemsPerPage = parseInt(tableHeight / 40);

      if (this.customer.items.length < this.itemsPerPage) this.itemsPerPage = this.customer.items.length;


      if (!this.footerProps['items-per-page-options'].includes(this.itemsPerPage)) {

        if (this.footerProps['items-per-page-options'].length == this.optionsLength) {

          this.footerProps['items-per-page-options'].unshift(this.itemsPerPage);

        } else {

          this.footerProps['items-per-page-options'].shift();

          this.footerProps['items-per-page-options'].unshift(this.itemsPerPage);

        }

      }

    },

    initialize: function initialize() {

      var self=this;

      for (var i = 0; i < 300; i++) {

        this.drpItems.push("mukesh" + i);

      }


      for (var i = 0; i < 50000; i++) {

        var obj = {

          id: i,

          description: 'ABC',

          qty1: '',

          qty2: 'mukesh14',

          qty3: 'mukesh1'

        };

        obj.drpItems = [];

        this.customer.items.push(obj);

    

      } // deep copy is the solution

      // const items = JSON.parse(JSON.stringify(this.customer.items))



      this.items = this.customer.items;

      setTimeout(function(){    self.loading=false;},1500);

    }

  }

});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" type="text/css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" type="text/css" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" type="text/css" rel="stylesheet" />

<style>

#dataTable .v-table tbody tr:not(:last-child) {

    border-bottom: none;

}

#dataTable th{

 font-size:16px;

 color:"black"

}

.v-data-table__wrapper{

  border:1px solid;

}

</style>

 <v-data-table

        must-sort

        :headers="headers"

        :pagination.sync="pagination"

        :rows-per-page-items="pagination.rowsPerPageItems"

        :total-items="pagination.totalItems"

        :loading="loading"

        :items="items"

        class="elevation-1"

      >

<div id="app">

<div>

  <v-app>

    <v-main>

      <v-container>

        <v-data-table id="dataTable" dense

          :headers="headers"

          :items="items"

          :rows-per-page="itemsPerPage"

          :footer-props="footerProps"

          :loading="loading" loading-text="Loading... Please wait"

        >

     

      </template>

          <template v-slot:item.qty1="props">

            <v-text-field v-model="props.item.qty1"></v-text-field>

          </template>

          <template v-slot:item.qty2="props">

            <v-select

            :items="drpItems"

            label="Standard"

            v-model="props.item.qty2"

            :value="props.item.qty2"

          ></v-select>  

        

           </template>  

            

          <template v-slot:item.qty3="props">

            <v-select

            :items="drpItems"

            label="Standard"

            :value="props.item.qty3"

            v-model="props.item.qty3"></v-select>  

        

           </template>  

       

        </v-data-table>

      </v-container>

    </v-main>

  </v-app>

  </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2022-10-08
  • 2 回答
  • 0 關(guān)注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)