vue génère une table et la trie

Cette fois, je vais vous apporter Vue pour générer une table et la trier. Quelles sont les précautions pour que Vue génère une table et la trier. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Il existe désormais un tableau généré à l'aide du plug-in de pagination mybatis. Les données du tableau sont obtenues via vue L'affichage frontal utilise

La vue en arrière-plan obtient des données à l'aide du plug-in de pagination pour interroger, puis utilise un rappel pour renvoyer le résultat à un modèle de 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);
      }
    }
  });
}

La condition requise est la suivante : ajouter un numéro de série

au tableau généré Je viens de commencer à utiliser les fonctions 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);
  }
}

Mettez la méthode ci-dessus sur l' événement de clic pour générer le tableau, vous pouvez afficher le numéro de série, puis cliquer sur la page suivante ou le numéro de page de la pagination, et lorsque vous passez à la page suivante, le numéro de série le numéro disparaît,

Il est naturel de penser qu'il devrait y avoir une opération pour ajouter un numéro de série après avoir cliqué sur la page suivante, j'ai donc trouvé un moyen d'afficher les données sur la page suivante et ajouté la méthode js ci-dessus, mais le résultat n'a pas pris effet. ,

Personnellement, je pense que la méthode rownum a été ajoutée avant l'actualisation du dom après la recherche des données, puis après la mise à jour du dom, le numéro de série a disparu

Le problème a finalement été résolu en recherchant des informations comme suit. Ajoutez la méthode Vue.nextTick(function(){})

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

à chaque endroit où les requêtes de pagination apparaissent. 1. vm.$nextTick( [callback] )

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

3. File d'attente de mise à jour asynchrone

Exemple

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

Ou

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

Quand devez-vous utiliser Vue.nextTick()

Les opérations DOM que vous effectuez dans la fonction hook créée() du cycle de vie de Vue doivent être placées dans la fonction de rappel de Vue.nextTick(). Quelle en est la raison ? La raison est que lorsque la fonction hook créée() est exécutée, le DOM En fait, aucun rendu n'est effectué et les opérations DOM pour le moment sont vaines, donc le code js pour les opérations DOM doit être placé dans la fonction de rappel de Vue.nextTick(). À cela correspond la fonction hook montée, car tous les montages et rendus DOM ont été terminés lorsque cette fonction hook est exécutée. À ce stade, il n'y aura aucun problème pour effectuer des opérations DOM dans cette fonction hook. .

Lorsqu'une opération doit être effectuée après les modifications des données et que cette opération nécessite l'utilisation d'une structure DOM qui change à mesure que les données changent, cette opération doit être placée dans la fonction de rappel de Vue.nextTick().

Vue effectue les mises à jour du DOM de manière asynchrone. Une fois les modifications de données observées, Vue ouvrira une file d'attente puis la mettra à jour dans la même boucle d'événements. observateur qui observe les changements de données Entrez dans cette file d'attente. Si cet observateur est déclenché plusieurs fois, il ne sera placé dans la file d'attente qu'une seule fois. Ce comportement de mise en mémoire tampon peut éliminer efficacement les calculs inutiles et les opérations DOm provoqués par des données en double. Dans la prochaine boucle d'événements, Vue effacera la file d'attente et effectuera les mises à jour DOM nécessaires.

Lorsque vous définissez

 vm.someData = 'new value'，DOM

Il ne sera pas mis à jour immédiatement, mais les mises à jour DOM nécessaires seront effectuées lorsque la file d'attente asynchrone sera effacée, c'est-à-dire lorsque la mise à jour sera effectuée au début de la prochaine boucle d'événements. Si à ce moment vous souhaitez utiliser le DOM mis à jour

Si vous faites quelque chose dans un certain état, des problèmes surgiront. . Afin d'attendre que Vue ait fini de mettre à jour le DOM après les modifications des données, vous pouvez utiliser

immédiatement après les modifications des données. Vue.nextTick(callback) . Cette fonction de rappel sera appelée une fois la mise à jour du DOM terminée.

Résumé :

* `Vue.nextTick(callback)`, lorsque les données changent, le rappel est exécuté après la mise à jour.

* `Vue.$nextTick(callback)`, lorsque le dom change, le rappel est exécuté après la mise à jour.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Liaison de boîte contextuelle contextuelle pour ajouter des événements de données (explication détaillée étape par étape)

Nécessite d'appeler js en utilisant une explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!