vue generates table and sorts it

This time I will bring you Vue to generate a table and sort it. What are the precautions for Vue to generate a table and sort it? The following is a practical case, let's take a look.

Now there is a table generated using the mybatis paging plug-in. The data in the table is obtained through vue. The front-end display uses

The background vue gets the data and uses the paging plug-in to query and then uses the callback to return the result to a model of vue

/**
 * 分页控件加载
 * @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);
      }
    }
  });
}

The requirement is: add a serial number

to the generated table Just started using js functions

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

Put the above method on the

event of clicking to generate the table, you can display the serial number, then click the next page or page number of the paging, and when you jump to the next page, the serial number disappears,

It is natural to think that there should be an operation of adding a serial number after clicking the next page, so I found a way to display the data on the next page, and added the above js method, but the result did not take effect,

Personally, I think that after the data was found, the rownum method was added before the dom was refreshed, and then after the dom was updated, the serial number disappeared

The problem was finally solved by searching for information as follows, adding the Vue.nextTick(function(){}) method

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

wherever paging queries appear. 1.

vm.$nextTick( [callback] )

2.

Vue.nextTick( [callback, context] )

3. Asynchronous update queue

Example

<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渲染已经完成')
      })
    }
  }})

Or

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

When do you need to use Vue.nextTick()

The

DOM operations you perform in the created() hook function of Vuelifecycle must be placed in the callback function of Vue.nextTick(). What is the reason? The reason is that when the created() hook function is executed, the DOM In fact, no rendering is performed, and DOM operations at this time are in vain, so the js code for DOM operations must be put into the callback function of Vue.nextTick(). Corresponding to it is the mounted hook function, because all DOM mounting and rendering have been completed when the hook function is executed. At this time, there will be no problem in performing any DOM operations in the hook function. .

When there is an operation to be performed after the data changes, and this operation requires the use of a DOM structure that changes as the data changes, this operation should be put into the callback function of Vue.nextTick().

Vue performs DOM updates asynchronously. Once data changes are observed, Vue will open a queue and then update it in the same event loop. watcher that observes data changes Push into this queue. If this watcher is triggered multiple times, it will only be pushed to the queue once. This buffering behavior can effectively eliminate unnecessary calculations and DOm operations caused by duplicate data. In the next event loop, Vue will clear the queue and perform the necessary DOM updates.

When you set

 vm.someData = 'new value'，DOM

It will not be updated immediately, but the necessary DOM updates will be performed when the asynchronous queue is cleared, that is, when the update is performed at the beginning of the next event loop. If at this time you want to use the updated DOM

If you do something in a certain state, problems will arise. . In order to wait for Vue to finish updating the DOM after the data changes, you can use

immediately after the data changes. Vue.nextTick(callback) . This callback function will be called after the DOM update is completed.

Summarize:

* `Vue.nextTick(callback)`, when the data changes, the callback is executed after updating.

* `Vue.$nextTick(callback)`, when the dom changes, the callback is executed after updating.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Popup popup box binding to add data event (detailed step-by-step explanation)

Require to call js to use Detailed explanation

The above is the detailed content of vue generates table and sorts it. For more information, please follow other related articles on the PHP Chinese website!