如何使用vue中v-for生成table并給table加上序號

小編給大家分享一下如何使用vue中v-for生成table并給table加上序號，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供鄉(xiāng)寧網(wǎng)站建設(shè)、鄉(xiāng)寧做網(wǎng)站、鄉(xiāng)寧網(wǎng)站設(shè)計(jì)、鄉(xiāng)寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、鄉(xiāng)寧企業(yè)網(wǎng)站模板建站服務(wù)，10余年鄉(xiāng)寧做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

現(xiàn)在有一個(gè)使用mybatis的分頁插件生成的table，table中數(shù)據(jù)是通過vue獲得的，前臺(tái)顯示使用<tr v-for="item in items">

后臺(tái)vue獲取數(shù)據(jù)使用分頁插件進(jìn)行查詢?nèi)缓笫褂没卣{(diào),將結(jié)果返回給vue的一個(gè)model

/**
 * 分頁控件加載
 * @param data
 */
function aspnetPagerInfoIM(pageDataShow,pageModule,resource, modelCallBack) {
  var pageDataShow = $("#"+pageDataShow);
  var pageModule = $("#"+pageModule);
  pageDataShow.empty();
  pageModule.empty();
  resource.get({
    page: '0'
  }).then(function(response){
    initLaypage(pageDataShow,pageModule,response.data, resource, modelCallBack);
    modelCallBack(response.data.content);
  })
}
/**
 * 初始化分頁組件
 * @param page 查詢出來的數(shù)據(jù)包括分頁信息
 * @param resource vue的resource對象
 * @param modelCallBack 每次頁面跳轉(zhuǎn)回調(diào)方法 modelCallBack(response.data.content)
 */
function initLaypage(pageDataShow,pageModule,page, resource, modelCallBack) {
  var singleInvoke = false
  laypage({
    cont : pageModule,
    pages : page.totalPages, //總頁數(shù)
    skin : '#fff', //加載內(nèi)置皮膚
    skip: true,    //是否開啟跳頁
    groups : 5,    //連續(xù)顯示分頁數(shù)
    hash : true,   //開啟hash
    jump : function(obj) {
      if(!singleInvoke) {
        singleInvoke = true;
      }else {
        resource.get({
          page: obj.curr -1
        }).then(function(response){
          modelCallBack(response.data.content);
        })
      }
      pageDataShow.empty();
      if(page.totalElements>0){
        $("<p>共"+page.totalElements+"條記錄，"
          +"每頁"+page.size+"條，"
          +"當(dāng)前第 "+obj.curr +"/"+page.totalPages+"頁"
          +"</p>").appendTo(pageDataShow);
      }
    }
  });
}

需求是：給生成的table添加序號

剛開始使用js的函數(shù)

function rownum(){
　　//首先拿到table中tr的數(shù)量 得到一共多少條數(shù)據(jù)
  var len = $("#tableId table tbody tr").length;
  //使用循環(huán)給每條數(shù)據(jù)加上序號
  for(var i = 1;i<len+1;i++){
    $('#tableId table tr:eq('+i+') span:first').text(i);
  }
}

將上面的方法放在點(diǎn)擊生成table的事件上 , 可以顯示序號，接著點(diǎn)擊分頁的下一頁或者頁數(shù)，跳轉(zhuǎn)到下一頁的時(shí)候，序號消失了，

很自然的想到在點(diǎn)擊下一頁后也應(yīng)該有添加序號的操作，于是找到顯示下一頁數(shù)據(jù)的方法，加上上面的js方法，結(jié)果沒有生效，

個(gè)人覺得是查出數(shù)據(jù)后rownum方法在dom沒刷新前進(jìn)行了添加，然后dom更新后，序號消失了

通過查找資料最終像下面這樣使用解決了問題 , 在每個(gè)出現(xiàn)分頁查詢的地方都加上 Vue.nextTick(function(){})方法

var model={
object[]
}
spnetPagerInfoIM(electricalPageDataShow, electricalPageModule, electricalResource, function(result) {
  model.object = result;
  Vue.nextTick(function(){
    rownum();
  });
});

一、vm.$nextTick( [callback] )

二、Vue.nextTick( [callback, context] )

三、異步更新隊(duì)列

實(shí)例

<ul id="demo">
  <li v-for="item in list">{{item}}</div>
</ul>
new Vue({
  el:'#demo',
  data:{
    list=[0,1,2,3,4,5,6,7,8,9,10]
  },
  methods:{
    push:function(){
      this.list.push(11);
      this.nextTick(function(){
        alert('數(shù)據(jù)已經(jīng)更新')
      });
      this.$nextTick(function(){
        alert('v-for渲染已經(jīng)完成')
      })
    }
  }})

或者

this.$http.post(apiUrl)
  .then((response) => {
  if (response.data.success) {
    this.topFocus.data = response.data.data;
    this.$nextTick(function(){
          //渲染完畢
    });
    }
  }).catch(function(response) {
    console.log(response);
  });

什么時(shí)候需要用的Vue.nextTick()

你在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。原因是什么呢，原因是在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。與之對應(yīng)的就是mounted鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問題。

在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。

Vue是異步執(zhí)行dom更新的，一旦觀察到數(shù)據(jù)變化，Vue就會(huì)開啟一個(gè)隊(duì)列，然后把在同一個(gè)事件循環(huán) (event loop) 當(dāng)中觀察到數(shù)據(jù)變化的 watcher 推送進(jìn)這個(gè)隊(duì)列。如果這個(gè)watcher被觸發(fā)多次，只會(huì)被推送到隊(duì)列一次。這種緩沖行為可以有效的去掉重復(fù)數(shù)據(jù)造成的不必要的計(jì)算和DOm操作。而在下一個(gè)事件循環(huán)時(shí)，Vue會(huì)清空隊(duì)列，并進(jìn)行必要的DOM更新。

當(dāng)你設(shè)置

 vm.someData = 'new value'，DOM

并不會(huì)馬上更新，而是在異步隊(duì)列被清除，也就是下一個(gè)事件循環(huán)開始時(shí)執(zhí)行更新時(shí)才會(huì)進(jìn)行必要的DOM更新。如果此時(shí)你想要根據(jù)更新的 DOM

狀態(tài)去做某些事情，就會(huì)出現(xiàn)問題。。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用

Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。

以上是“如何使用vue中v-for生成table并給table加上序號”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：如何使用vue中v-for生成table并給table加上序號
文章分享：http://muchs.cn/article14/ishsde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、App開發(fā)、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容