v-for implémente la méthode de génération d'une table et d'ajout d'un numéro de série à la table-js tutoriel-php.cn

v-for implémente la méthode de génération d'une table et d'ajout d'un numéro de série à la table

小云云

Libérer： 2018-01-20 13:47:56

original

2077 Les gens l'ont consulté

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: &#39;0&#39;
  }).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 : &#39;#fff&#39;, //加载内置皮肤
    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);
      }
    }
  });
}

Copier après la connexion

La condition requise est : ajouter au tableau généré le numéro de série

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

Copier après la connexion

Mettez ce qui précède méthode sur l'événement click pour générer le tableau, vous pouvez afficher le numéro de série, puis cliquer sur Sur la page suivante ou le numéro de page de la pagination, en passant à la page suivante, le numéro de série a disparu

Il. Il est naturel de penser qu'il devrait y avoir une opération pour ajouter le numéro de série après avoir cliqué sur la page suivante, donc je l'ai trouvé et affiché. La méthode d'une page de données, plus la méthode js ci-dessus, ne fonctionne pas

<. 🎜> Personnellement, je pense qu'une fois les données trouvées, la méthode rownum est ajoutée avant l'actualisation du dom, puis après la mise à jour du dom, le numéro de série disparaît

Le problème a finalement été résolu en recherchant informations comme suit, en ajoutant la méthode Vue.nextTick(function(){}) à chaque endroit où la requête de pagination se produit

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

Copier après la connexion

vm.$nextTick( [callback] )1.

Vue.nextTick( [callback, context] )

3. File d'attente de mise à jour asynchrone

Instance

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

Copier après la connexion

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

Copier après la connexion

Quand devez-vous utiliser Vue.nextTick()

Que faites-vous dans le cycle de vie de Vue L'opération DOM effectuée par le hook créé() ? La fonction doit être placée 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 placé 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 = &#39;new value&#39;，DOM

Copier après la connexion

, il ne sera pas mis à jour immédiatement, mais sera exécuté lorsque la file d'attente asynchrone sera effacée, c'est-à-dire lors du prochain la boucle d'événements démarre. Les mises à jour nécessaires du DOM ne seront effectuées que lors de la mise à jour. 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, exécutez le rappel 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!