집 > 기사 > 웹 프론트엔드 > vue의 v-for를 사용하여 테이블을 생성하고 테이블에 일련번호를 추가하세요.

vue의 v-for를 사용하여 테이블을 생성하고 테이블에 일련번호를 추가하세요.

小云云원래의: 2018-01-02 10:06:032758검색

이 글은 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: '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);
      }
    }
  });
}

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

저는 방금 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(){}) 메소드가 페이징 쿼리가 발생한 모든 위치에 추가되었습니다

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. 비동기 업데이트 대기열

인스턴스

<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 라이프 사이클에서 Vue.nextTick()

yourcreated() 후크 함수를 사용해야 하는 경우 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 업데이트를 수행합니다.

 vm.someData = 'new value'，DOM

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

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

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

요약:

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

vue의 v-for를 사용하여 테이블을 생성하고 테이블에 일련번호를 추가하세요.

관련 기사