首頁 > 文章 > web前端 > vue產生table並排序

vue產生table並排序

php中世界最好的语言原創: 2018-04-16 14:17:213930瀏覽

這次帶給大家vue生成table並排序，vue生成table並排序的注意事項有哪些，下面就是實戰案例，一起來看一下。

現在有一個使用mybatis的分頁外掛程式產生的table，table中資料是透過vue取得的，前台顯示使用

後台vue取得資料使用分頁外掛程式進行查詢然後使用回呼,將結果傳回給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 查询出来的数据包括分页信息
 * @param resource vue的resource对象
 * @param modelCallBack 每次页面跳转回调方法 modelCallBack(response.data.content)
 */
function initLaypage(pageDataShow,pageModule,page, resource, modelCallBack) {
  var singleInvoke = false
  laypage({
    cont : pageModule,
    pages : page.totalPages, //总页数
    skin : '#fff', //加载内置皮肤
    skip: true,    //是否开启跳页
    groups : 5,    //连续显示分页数
    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+"条，"
          +"当前第 "+obj.curr +"/"+page.totalPages+"页"
          +"</p>").appendTo(pageDataShow);
      }
    }
  });
}

需求是：為產生的table加上序號

# 剛開始使用js的函數

function rownum(){
  //首先拿到table中tr的数量 得到一共多少条数据
  var len = $("#tableId table tbody tr").length;
  //使用循环给每条数据加上序号
  for(var i = 1;i<len+1;i++){
    $(&#39;#tableId table tr:eq(&#39;+i+&#39;) span:first&#39;).text(i);
  }
}

# 將上面的方法放在點擊生成table的事件上, 可以顯示序號，接著點擊分頁的下一頁或頁數，跳到下一頁的時候，序號消失了，

很自然的想到在點擊下一頁後也應該有添加序號的操作，於是找到顯示下一頁資料的方法，加上上面的js方法，結果沒有生效，

個人覺得是查出資料後rownum方法在dom沒刷新前進行了添加，然後dom更新後，序號消失了

透過尋找資料最終像下面這樣使用解決了問題 , 在每個出現分頁查詢的地方都加上 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}}</p>
</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('数据已经更新')
      });
      this.$nextTick(function(){
        alert('v-for渲染已经完成')
      })
    }
  }})

或

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()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回呼函數。原因是什麼呢，原因是在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js程式碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，因為該鉤子函數執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題。

在資料變化後要執行的某個操作，而這個操作需要使用隨資料改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回呼函數中。

Vue是非同步執行dom更新的，一旦觀察到資料變化，Vue就會開啟一個佇列，然後把在同一個事件循環 (event loop) 當中觀察到資料變化的 watcher 推送進這個佇列。如果這個watcher被觸發多次，只會被推送到佇列一次。這種緩衝行為可以有效的去掉重複資料造成的不必要的計算和DOm操作。而在下一個事件循環時，Vue會清空佇列，並進行必要的DOM更新。

當你設定

 vm.someData = 'new value'，DOM

並不會馬上更新，而是在非同步佇列被清除，也就是在下一個事件循環開始時執行更新時才會進行必要的DOM更新。如果此時你想要根據更新的 DOM

狀態去做某些事情，就會出現問題。。為了在資料變更之後等待 Vue 完成更新 DOM ，可以在資料變更之後立即使用

Vue.nextTick(callback) 。這樣回呼函數在 DOM 更新完成後就會呼叫。

總結：

* `Vue.nextTick(callback)`，當資料發生變化，更新後執行回呼。
* `Vue.$nextTick(callback)`，當dom發生變化，更新後執行的回呼。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！