v-for는 테이블을 생성하고 테이블에 일련번호를 추가하는 방법을 구현합니다.-JS 튜토리얼-php.cn

v-for는 테이블을 생성하고 테이블에 일련번호를 추가하는 방법을 구현합니다.

小云云

풀어 주다： 2018-01-20 13:47:56

원래의

2081명이 탐색했습니다.

이 글은 vue의 v-for를 사용하여 테이블을 생성하고 테이블에 일련번호를 추가하는 방법에 대한 관련 정보를 주로 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

이제 mybatis 페이징 플러그인을 사용하여 생성된 테이블이 있습니다. 프런트 엔드 디스플레이는

를 사용합니다. 백그라운드 vue는 페이징 플러그인을 사용하여 데이터를 얻은 다음 콜백을 사용하여 결과를 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);
      }
    }
  });
}

로그인 후 복사

모델에 반환합니다. 요구 사항은 생성된 테이블에 일련 번호를 추가하는 것입니다

저는 그냥 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);
  }
}

로그인 후 복사

위의 방법을 클릭에 넣으면 테이블이 생성되는 이벤트에서 일련 번호를 표시한 후 페이지의 다음 페이지 또는 페이지 번호를 클릭하면 해당 페이지로 이동합니다.

다음 페이지를 클릭하면 시리얼 번호가 추가되어야 한다고 생각하는 것이 당연합니다. 시리얼 번호 연산을 위해 다음 페이지에 데이터를 표시하는 방법을 찾아서 위의 js를 추가했습니다.

개인적으로는 데이터를 찾은 후 DOM을 새로고침하기 전에 rownum 메소드를 추가했다가 dom을 업데이트한 후에 일련번호가 사라진 것 같습니다

문제는 다음과 같습니다. 페이징 쿼리가 나타날 때마다 Vue.nextTick(function(){}) 메서드를 추가하여 다음과 같이 정보를 검색하여 최종적으로 해결되었습니다. vm.$nextTick( [callback] )

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

3. 비동기 업데이트 대기열

vm.$nextTick( [callback] )

二、Vue.nextTick( [callback, context] ) 인스턴스

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

로그인 후 복사

또는

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

로그인 후 복사

언제 사용해야 합니까? Vue.nextTick()

Vue 라이프사이클의 Created() 후크 함수에서 수행하는 DOM 작업은 Vue.nextTick()의 콜백 함수에 배치되어야 합니다. 그 이유는 create() Hook 함수가 실행될 때 실제로 DOM이 전혀 렌더링되지 않고, 이때의 DOM 작업이 헛되기 때문에 DOM 작업을 위한 js 코드를 Vue에 넣어야 하기 때문입니다. nextTick()의 콜백 함수에서. 이에 대응하는 것이 탑재된 Hook 함수인데, 이 Hook 함수가 실행되면 모든 DOM 탑재 및 렌더링이 완료되므로 이 Hook 함수에서 DOM 작업을 수행하는 데에는 문제가 없습니다.

데이터 변경 후 작업을 수행해야 하고, 이 작업에 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하는 경우 이 작업을 Vue.nextTick()의 콜백 함수에 넣어야 합니다.

Vue는 DOM 업데이트를 비동기식으로 수행합니다. 데이터 변경이 관찰되면 Vue는 대기열을 열고 동일한 이벤트 루프의 데이터 변경을 관찰하는 감시자를 이 대기열에 푸시합니다. 이 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 이러한 버퍼링 동작은 중복 데이터로 인해 발생하는 불필요한 계산 및 DOM 작업을 효과적으로 제거할 수 있습니다. 다음 이벤트 루프에서 Vue는 큐를 지우고 필요한 DOM 업데이트를 수행합니다.

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

로그인 후 복사

을 설정하면 즉시 업데이트되지 않지만 비동기 대기열이 지워질 때, 즉 다음 이벤트 루프가 시작될 때 업데이트가 수행될 때 필요한 DOM 업데이트가 수행됩니다. 이 시점에서 업데이트된 DOM

상태를 기반으로 작업을 수행하려는 경우 문제가 발생합니다. . 데이터 변경 후 Vue가 DOM 업데이트를 완료할 때까지 기다리려면 데이터 변경 직후

Vue.nextTick(콜백)을 사용할 수 있습니다. 이 콜백 함수는 DOM 업데이트가 완료된 후에 호출됩니다.

요약:

* `Vue.nextTick(callback)`, 데이터가 변경되면 업데이트 후 콜백을 실행합니다. * `Vue.$nextTick(callback)`, dom이 변경되면 업데이트 후 콜백이 실행됩니다.