如何使用vue中v-for生成table并給table加上序號(hào)

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

成都創(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)頁(yè)設(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的分頁(yè)插件生成的table，table中數(shù)據(jù)是通過(guò)vue獲得的 ， 前臺(tái)顯示使用

后臺(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){
        $("
共"+page.totalElements+"條記錄，"
          +"每頁(yè)"+page.size+"條，"
          +"當(dāng)前第 "+obj.curr +"/"+page.totalPages+"頁(yè)"
          +"
").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
將上面的方法放在點(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í)例

  {{item}}