Use vue's v-for to generate a table and add a serial number to the table

This article mainly introduces the relevant information about using vue's v-for to generate a table and add serial numbers to the table. Friends who need it can refer to it. I hope it can help everyone.

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 the js function

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 think After the data was found, the rownum method was added before the dom was refreshed. Then after the dom was updated, the serial number disappeared.

The problem was finally solved by searching for information as follows, in every place where paging queries appeared. Add the Vue.nextTick(function(){}) method

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

1. vm.$nextTick( [callback] )

2. Vue.nextTick( [callback, context] )

3. Asynchronous update queue

Instance

<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()

you DOM operations performed in the created() hook function of the Vue life cycle must be placed in the callback function of Vue.nextTick(). What is the reason? The reason is that the DOM is not actually rendered at all when the create() hook function is executed, and DOM operations at this time are in vain, so the js code for DOM operations must be put into Vue. In the callback function of nextTick(). Corresponding to this is the mounted hook function, because all DOM mounting and rendering have been completed when this hook function is executed, there will be no problem in performing any DOM operations in this 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 push the watcher that observes data changes in the same event loop 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. Problems will arise if you want to do something based on the updated DOM

state at this time. . In order to wait for Vue to finish updating the DOM after the data changes, you can use

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

Summary:

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

Related recommendations:

Examples to explain vue v-for data processing

Introduction and use of the v for instruction in the vue component Analysis of alarm problems in v-for

Circular use of v-for instruction example code

The above is the detailed content of Use vue's v-for to generate a table and add a serial number to the table. For more information, please follow other related articles on the PHP Chinese website!