快捷導(dǎo)航

使用vue的v-for生成table并給table加上序號的實例代碼

更新時間：2017年10月27日 08:31:37 作者：弓長張&木子李

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

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

后臺vue獲取數(shù)據(jù)使用分頁插件進行查詢?nèi)缓笫褂没卣{(diào),將結(jié)果返回給vue的一個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);
  }
}

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

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

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

通過查找資料最終像下面這樣使用解決了問題 , 在每個出現(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] )

三、異步更新隊列

實例

<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);
  });

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

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

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

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

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