vue generiert eine Tabelle und sortiert sie

Dieses Mal bringe ich Ihnen Vue zum Generieren und Sortieren einer Tabelle. Was sind die Vorsichtsmaßnahmen , damit Vue eine Tabelle generiert und sortiert? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Jetzt gibt es eine Tabelle, die mit dem mybatis-Paging-Plugin generiert wurde. Die Daten in der Tabelle werden über vue abgerufen. Die Front-End-Anzeige verwendet

Der Hintergrund-Vue ruft Daten mithilfe des Paging-Plug-Ins zur Abfrage ab und verwendet dann einen Rückruf, um das Ergebnis an ein Vue-Modell zurückzugeben

/**
 * 分页控件加载
 * @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);
      }
    }
  });
}

Die Anforderung ist: Fügen Sie der generierten Tabelle eine Seriennummer

hinzu Habe gerade angefangen, js-Funktionen zu verwenden

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

Wenn Sie die obige Methode auf das Ereignis anwenden, klicken Sie, um die Tabelle zu generieren. Sie können die Seriennummer anzeigen, dann auf die nächste Seite oder die Seitennummer der Seite klicken und, wenn Sie zur nächsten Seite springen, die Seriennummer Nummer verschwindet,

Es ist natürlich anzunehmen, dass es nach dem Klicken auf die nächste Seite einen Vorgang zum Hinzufügen einer Seriennummer geben sollte. Daher habe ich eine Möglichkeit gefunden, die Daten auf der nächsten Seite anzuzeigen, und die obige js-Methode hinzugefügt, aber das Ergebnis wurde nicht wirksam ,

Persönlich denke ich, dass nach dem Auffinden der Daten die Rownum-Methode hinzugefügt wurde, bevor der Dom aktualisiert wurde, und dass nach der Aktualisierung des Doms die Seriennummer verschwand

Das Problem wurde schließlich gelöst, indem wie folgt nach Informationen gesucht wurde: Fügen Sie die Vue.nextTick(function(){})-Methode

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

an jeder Stelle hinzu, an der Paging-Abfragen angezeigt werden. 1. vm.$nextTick( [callback] )

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

3. Asynchrone Update-Warteschlange

Beispiel

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

Oder

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

Wann müssen Sie Vue.nextTick()

verwenden? Die DOM-Operationen, die Sie in der Hook-Funktion „created()“ des VueLebenszyklus ausführen, müssen in der Callback-Funktion von Vue.nextTick() platziert werden. Was ist der Grund? Der Grund ist, dass bei Ausführung der Hook-Funktion „created()“ das DOM Tatsächlich wird kein Rendering durchgeführt und die DOM-Operation ist zu diesem Zeitpunkt vergeblich. Daher muss der js-Code für die DOM-Operation in die Rückruffunktion von Vue.nextTick() eingefügt werden. Dies entspricht der gemounteten Hook-Funktion, da das gesamte DOM-Mounting und -Rendering abgeschlossen ist, wenn die Hook-Funktion ausgeführt wird. Zu diesem Zeitpunkt treten keine Probleme bei der Ausführung von DOM-Vorgängen in der Hook-Funktion auf. .

Wenn nach Datenänderungen eine Operation ausgeführt werden muss und diese Operation die Verwendung einer DOM-Struktur erfordert, die sich mit den Daten ändert, sollte diese Operation in die Rückruffunktion von Vue.nextTick() eingefügt werden.

Vue führt DOM-Aktualisierungen asynchron durch. Sobald Datenänderungen festgestellt werden, öffnet Vue eine Warteschlange und aktualisiert sie dann in derselben Ereignisschleife. Beobachter, der Datenänderungen beobachtet In diese Warteschlange schieben. Wenn dieser Watcher mehrmals ausgelöst wird, wird er nur einmal in die Warteschlange verschoben. Durch dieses Pufferverhalten können unnötige Berechnungen und DOm-Operationen, die durch doppelte Daten verursacht werden, wirksam vermieden werden. In der nächsten Ereignisschleife löscht Vue die Warteschlange und führt die erforderlichen DOM-Aktualisierungen durch.

Wenn Sie

 vm.someData = 'new value'，DOM

einstellen Es wird nicht sofort aktualisiert, aber die erforderlichen DOM-Aktualisierungen werden durchgeführt, wenn die asynchrone Warteschlange gelöscht wird, d. h. wenn die Aktualisierung zu Beginn der nächsten Ereignisschleife durchgeführt wird. Wenn Sie zu diesem Zeitpunkt das aktualisierte DOM verwenden möchten

Wenn Sie in einem bestimmten Zustand etwas tun, treten Probleme auf. . Um zu warten, bis Vue die Aktualisierung des DOM nach den Datenänderungen abgeschlossen hat, können Sie

unmittelbar nach den Datenänderungen verwenden. Vue.nextTick(callback) . Diese Rückruffunktion wird aufgerufen, nachdem die DOM-Aktualisierung abgeschlossen ist.

Zusammenfassung:

* „Vue.nextTick(callback)“, wenn sich die Daten ändern, wird der Rückruf nach der Aktualisierung ausgeführt.
* `Vue.$nextTick(callback)`, wenn sich der Dom ändert, wird der Rückruf nach dem Update ausgeführt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Popup-Popup-Box-Bindung zum Hinzufügen von Datenereignissen (ausführliche Schritt-für-Schritt-Erklärung)

Erfordern Sie, js mithilfe einer detaillierten Erklärung aufzurufen

Das obige ist der detaillierte Inhalt vonvue generiert eine Tabelle und sortiert sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!