v-for implements the method of generating a table and adding a serial number to the table-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

v-for implements the method of generating a table and adding a serial number to the table

小云云

Jan 20, 2018 pm 01:47 PM

table v-for

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, 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: &#39;0&#39;
  }).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 : &#39;#fff&#39;, //加载内置皮肤
    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);
      }
    }
  });
}

Copy after login

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

Copy after login

Put the above method on the event of clicking to generate the table, you can display the serial number, and then click the next page of the page Page or page number, when jumping to the next page, the serial number disappeared.

It is natural to think that there should be an operation to add the serial number after clicking the next page, so I found the next page data display method, plus the above js method, the result did not take effect.

I personally 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 in every place where paging queries appear

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

Copy after login

vm.$nextTick( [callback] )

Vue.nextTick( [callback, context] )

3. Asynchronous update queue

Instance

<ul id="demo">
  <li v-for="item in list">{{item}}</p>
</ul>
new Vue({
  el:&#39;#demo&#39;,
  data:{
    list=[0,1,2,3,4,5,6,7,8,9,10]
  },
  methods:{
    push:function(){
      this.list.push(11);
      this.nextTick(function(){
        alert(&#39;数据已经更新&#39;)
      });
      this.$nextTick(function(){
        alert(&#39;v-for渲染已经完成&#39;)
      })
    }
  }})

Copy after login

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

Copy after login

When do you need to use Vue. nextTick()

The DOM operations you perform 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 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 = &#39;new value&#39;，DOM

Copy after login

it will not be updated immediately, but when the asynchronous queue is cleared, that is, when the update is performed at the beginning of the next event loop Only then will the necessary DOM updates be performed. 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 issues in v-for

Circular use of v-for instruction example code

The above is the detailed content of v-for implements the method of generating a table and adding a serial number to the table. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

InZoi: How To Apply To School And University

1 months ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Where to find the Site Office Key in Atomfall

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7888

Java Tutorial

1649

CakePHP Tutorial

1410

Laravel Tutorial

1301

PHP Tutorial

1247

Related knowledge

Detailed explanation of v-for function in Vue3: perfect solution to list data rendering Jun 18, 2023 am 09:57 AM

With the continuous advancement of digital technology, front-end development has become an increasingly popular profession. Vue3 has become the first choice of more and more developers due to its simplicity, ease of use, efficiency and stability. Among them, the v-for function is one of the core functions used for list data rendering in Vue3. In this article, we will provide a detailed explanation of the v-for function in Vue3, so that you can better use it to solve actual development problems. 1. Basic syntax The basic syntax of the v-for function is as follows: <divv-

Best practices and performance optimization methods for using v-for in Vue Jul 17, 2023 am 08:53 AM

Best practices and performance optimization methods for using v-for in Vue Introduction: In Vue development, it is very common to use the v-for instruction, which can conveniently traverse and render the data of an array or object onto the template. However, improper use of v-for may cause performance issues when dealing with large-scale data. This article will introduce the best practices when using the v-for directive and provide some performance optimization methods. Best practice: When using the v-for instruction in Vue to render each item of data using a unique Key value, you need to

Tips for using v-for to implement dynamic sorting in Vue Jun 25, 2023 am 09:18 AM

Vue is a modern JavaScript framework that helps us build dynamic web pages and complex applications easily. In Vue, you can easily create loop structures using v-for to iteratively render data. In some specific scenarios, we can also use v-for to implement dynamic sorting. This article will introduce how to use v-for to implement dynamic sorting techniques in Vue, as well as some application scenarios and examples. 1. Use v-for to make it simple

How to solve '[Vue warn]: v-for='item in items': item' error Aug 19, 2023 am 11:51 AM

How to solve the "[Vuewarn]:v-for="iteminiitems":item" error During the Vue development process, using the v-for directive for list rendering is a very common requirement. However, sometimes we may encounter an error: "[Vuewarn]:v-for="iteminiitems":item". This article will introduce the cause and solution of this error, and give some code examples. First, let’s understand

Which one has higher priority, v-if or v-for in vue? Jul 20, 2022 pm 06:02 PM

In vue2, v-for has a higher priority than v-if; in vue3, v-if has a higher priority than v-for. In vue, never use v-if and v-for on the same element at the same time, which will cause a waste of performance (each rendering will loop first and then perform conditional judgment); if you want to avoid this situation, Templates can be nested in the outer layer (page rendering does not generate DOM nodes), v-if judgment is performed at this layer, and then v-for loop is performed internally.

v-for function in Vue3: perfect solution to list data rendering Jun 19, 2023 am 08:04 AM

In Vue3, v-for is considered the best way to render list data. v-for is a directive in Vue that allows developers to iterate through an array or object and generate a piece of HTML code for each item. The v-for directive is one of the most powerful template directives available to developers. In Vue3, the v-for instruction has been further optimized, making it easier to use and more flexible. The biggest change of the v-for directive in Vue3 is the binding of elements. In Vue2, use the v-for directive

Vue error: Unable to use v-for instruction correctly, how to solve it? Aug 17, 2023 pm 10:45 PM

Vue error: Unable to use v-for instruction correctly, how to solve it? In the development process using Vue, the v-for instruction is often used to render an array or object in a loop. However, sometimes we may encounter the problem of being unable to use the v-for instruction correctly, and we will see similar error messages in the console, such as "Error:Cannotreadproperty'xxx'ofundefined". This problem usually occurs in the following situations: Appears below: Import

Vue error: Unable to use v-for correctly for list rendering, how to solve it? Aug 18, 2023 pm 03:40 PM

Vue error: Unable to use v-for correctly for list rendering, how to solve it? When developing with Vue, the v-for instruction is a very commonly used instruction, which can loop through the rendering list. However, sometimes we may encounter some problems when using v-for for list rendering, resulting in errors and the failure to render the list correctly. Next, I will introduce some common error situations and solutions. 1. Error: Repeated key in v-for When using v-for loop to render the list, we need to give each loop

See all articles