使用vue的v-for生成table并給table加上序號(hào)的實(shí)例代碼

更新時(shí)間：2017年10月27日 08:31:37 作者：弓長(zhǎng)張&木子李

這篇文章主要介紹了使用vue的v-for生成table并給table加上序號(hào)的相關(guān)資料,需要的朋友可以參考下

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

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

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

需求是：給生成的table添加序號(hào)

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

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

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

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

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

通過(guò)查找資料最終像下面這樣使用解決了問(wèn)題 , 在每個(gè)出現(xiàn)分頁(yè)查詢的地方都加上 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操作無(wú)異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。與之對(duì)應(yīng)的就是mounted鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問(wèn)題。

在數(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ì)開(kāi)啟一個(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è)置