Utilisez le v-for de vue pour générer une table et ajouter un numéro de série à la table

Cet article présente principalement les informations pertinentes sur l'utilisation du v-for de vue pour générer une table et ajouter des numéros de série au tableau. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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 récupère les données, utilise le plug-in de pagination pour interroger puis utilise le 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);
      }
    }
  });
}

L'exigence est : ajouter un numéro de série à la table générée

Je viens de commencer à utiliser la fonction 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);
  }
}

met la méthode ci-dessus en cas de clic pour générer la table, qui peut afficher le numéro de série. la page suivante ou le numéro de page de la pagination. Lors du passage à la page suivante, le numéro de série disparaît,

Il est naturel de penser qu'il devrait y avoir une opération d'ajout d'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 une fois les données trouvées, puis après la mise à jour du dom, le numéro de série a disparu

Enfin, le problème a été résolu en recherchant les informations et en les utilisant comme suit, à chaque occurrence La Vue.nextTick(fonction (){}) est ajoutée au lieu de requête de pagination

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

1 vm.$nextTick( [callback] )

2. )

3. File d'attente de mise à jour asynchrone

instance

<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 le DOM n'est pas du tout rendu lorsque la fonction hook create() est exécutée, et les opérations DOM à ce moment sont vaines, donc le code js pour les opérations DOM doit être mis dans Vue. Dans la fonction de rappel de 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, 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 poussera l'observateur qui observe les modifications de données dans la même boucle d'événements 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. Au lieu de cela, 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énement. Des problèmes surgiront si, à ce stade, vous souhaitez faire quelque chose basé sur l'état DOM

mis à jour. . Pour attendre que Vue ait fini de mettre à jour le DOM après les modifications des données, vous pouvez utiliser

Vue.nextTick(callback) immédiatement après les modifications des données. 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.

Recommandations associées :

Explication de vue v-pour le traitement des données

Introduction et utilisation de v pour l'instruction en vue composant Analyse des problèmes d'alarme dans v-for

Utilisation circulaire du code d'exemple d'instruction v-for

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!