vue는 테이블을 생성하고 정렬합니다.

이번에는 vue가 테이블을 생성하고 정렬할 때 몇 가지 노트를 가져오겠습니다. 다음은 실제 사례입니다.

이제 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(){}) 메서드를 추가하여 마침내 문제가 해결되었습니다. 1. vm.$nextTick( [콜백] )

2. Vue.nextTick( [콜백, 컨텍스트] )vm.$nextTick( [callback] )

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

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

예

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

언제 Vue.nextTick()

을 사용해야 합니까? Vue

lifecycle의 Created() 후크 함수에서 수행하는 DOM 작업은 Vue.nextTick()의 콜백 함수에 배치되어야 합니다. 그 이유는 Created() Hook 함수가 실행될 때 DOM이 실제로 렌더링은 전혀 하지 않고, 이때의 DOM 연산은 헛수고이므로 DOM 연산을 위한 js 코드를 Vue.nextTick()의 콜백 함수에 넣어야 합니다. 이에 대응하는 것이 Mounted Hook 함수인데, 이 Hook 함수가 실행되면 모든 DOM Mounting과 Rendering이 완료되었기 때문에, 이 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이 변경되면 업데이트 후 콜백이 실행됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

데이터 이벤트 추가를 위한 팝업 팝업 상자 바인딩(자세한 단계별 설명)

js 사용 방법에 대한 자세한 설명 필요

위 내용은 vue는 테이블을 생성하고 정렬합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!