Verwenden Sie vues v-for, um eine Tabelle zu generieren und der Tabelle eine Seriennummer hinzuzufügen

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

Das Hintergrund-Vue ruft die Daten ab und 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: a hinzufügen Seriennummer zur generierten Tabelle

Ich habe gerade mit der Verwendung der js-Funktion

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

begonnen, um die obige Methode auf das Ereignis des Klickens anzuwenden, um die Tabelle anzuzeigen, die die Seriennummer anzeigen kann. Klicken Sie dann Beim Springen zur nächsten Seite verschwindet die Seriennummer.

Es liegt auf der Hand, dass nach dem Klicken auf die nächste Seite ein Vorgang zum Hinzufügen der Seriennummer erfolgen sollte Deshalb 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.

Ich persönlich denke, dass die Rownum-Methode verwendet wird, nachdem die Daten gefunden wurden wurde hinzugefügt, bevor der Dom aktualisiert wurde, und nach der Aktualisierung des Doms verschwand die Seriennummer

Das Problem wurde schließlich gelöst, indem nach den Informationen gesucht und wie folgt verwendet wurde: Bei jedem Vorkommen wurde Vue.nextTick( function(){})-Methode wird zum Paging-Abfrageort hinzugefügt

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

1. vm.$nextTick( [callback] )

2 ] )

3. Asynchrone Update-Warteschlange

Instanz

<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 nextTick() verwenden.

Die DOM-Operationen, die Sie in der Hook-Funktion „created()“ des Vue-Lebenszyklus ausführen, müssen in der Rückruffunktion 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.

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

 vm.someData = 'new value'，DOM

festlegen, wird es nicht sofort aktualisiert. Stattdessen werden die erforderlichen DOM-Aktualisierungen durchgeführt, wenn die asynchrone Warteschlange gelöscht wird, d. h. wenn die Aktualisierung durchgeführt wird am Anfang der nächsten Ereignisschleife. 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

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, 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.

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 vonVerwenden Sie vues v-for, um eine Tabelle zu generieren und der Tabelle eine Seriennummer hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!