v-for implementiert die Methode zum Generieren einer Tabelle und zum Hinzufügen einer Seriennummer zur Tabelle

In diesem Artikel werden hauptsächlich die relevanten Informationen zur Verwendung von Vue zum Generieren einer Tabelle und zum Hinzufügen von Seriennummern zur Tabelle vorgestellt. Ich hoffe, dass es allen helfen kann.

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 c90407e0abd3963cdb67485ab6ff4048

Der Hintergrund-Vue ruft die Daten ab, verwendet das Paging-Plug-in zur Abfrage und verwendet dann den 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 lautet: Zur generierten Tabelle hinzufügen Seriennummer

Habe gerade mit der Verwendung der js-Funktion begonnen

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

Geben Sie das Obige ein Wenn Sie auf das Click-Ereignis klicken, um die Tabelle zu generieren, können Sie die Seriennummer anzeigen und dann auf die nächste Seite oder Seitennummer klicken, wenn Sie zur nächsten Seite springen.

Es Es ist natürlich zu glauben, dass es nach dem Klicken auf die nächste Seite einen Vorgang zum Hinzufügen der Seriennummer geben sollte. Die Methode für eine Seite mit Daten und die obige js-Methode funktionieren nicht 🎜> Persönlich denke ich, dass das daran liegt, dass nach dem Auffinden der Daten die Rownum-Methode hinzugefügt wird, bevor der Dom aktualisiert wird, und dass nach der Aktualisierung des Doms die Seriennummer verschwindet

Das Problem wurde schließlich gelöst Suchen Sie wie folgt nach Informationen und fügen Sie die Methode Vue.nextTick(function(){}) an jeder Stelle hinzu, an der Paging-Abfragen angezeigt werden

1 🎜>

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

2.

vm.$nextTick( [callback] )

3. Asynchrone Update-Warteschlange

Vue.nextTick( [callback, context] ) Instanz

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

Wann müssen Sie Vue.nextTick() verwenden

Was machen Sie im Vue-Lebenszyklus? ) Hook-Funktion muss in der Callback-Funktion von Vue.nextTick() platziert werden. Was ist der Grund? Der Grund dafür ist, dass das DOM überhaupt nicht gerendert wird, wenn die Hook-Funktion create () ausgeführt wird, und DOM-Operationen zu diesem Zeitpunkt vergeblich sind, sodass der JS-Code für DOM-Operationen in Vue eingefügt werden muss die Callback-Funktion von nextTick(). Dies entspricht der gemounteten Hook-Funktion. Da bei Ausführung dieser Hook-Funktion das gesamte Mounten und Rendern des DOM abgeschlossen ist, treten bei der Ausführung von DOM-Vorgängen in dieser Hook-Funktion keine Probleme auf.

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

Wenn eine Operation ausgeführt werden muss, nachdem sich die Daten geändert haben, und diese Operation die Verwendung einer DOM-Struktur erfordert, die sich ändert, wenn sich die Daten ändern, sollte diese Operation in die Rückruffunktion von Vue.nextTick() eingefügt werden .

Vue führt DOM-Aktualisierungen asynchron durch. Sobald Datenänderungen beobachtet werden, öffnet Vue eine Warteschlange und schiebt dann den Beobachter, der Datenänderungen in derselben Ereignisschleife beobachtet, in diese Warteschlange. 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

festlegen, wird es nicht sofort aktualisiert, sondern ausgeführt, wenn die asynchrone Warteschlange gelöscht wird, also beim nächsten Mal Notwendige DOM-Aktualisierungen werden nur beim Aktualisieren durchgeführt. Es treten Probleme auf, wenn Sie an dieser Stelle etwas auf der Grundlage des aktualisierten DOM

-Status tun möchten. . Um zu warten, bis Vue die Aktualisierung des DOM nach den Datenänderungen abgeschlossen hat, können Sie

 vm.someData = 'new value'，DOM

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

Zusammenfassung:

* `Vue.nextTick(callback)`, wenn sich die Daten ändern, führen Sie den Rückruf nach der Aktualisierung aus. * `Vue.$nextTick(callback)`, wenn sich der Dom ändert, wird der Rückruf nach dem Update ausgeführt. Verwandte Empfehlungen:

Erklärung von Vue V für die Datenverarbeitung

Einführung und Verwendung von V für Anweisungen in Vue Komponentenanalyse von Alarmproblemen in v-for

Zirkuläre Verwendung von v-for-Anweisungsbeispielcode

Das obige ist der detaillierte Inhalt vonv-for implementiert die Methode zum Generieren einer Tabelle und zum Hinzufügen einer Seriennummer zur Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!