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++){
$('#tableId table tr:eq('+i+') span:first').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éfinissezvm.someData = 'new value'，DOM
* `Vue.$nextTick(callback)`, lorsque le dom change, le rappel est exécuté après la mise à jour.
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!
Supprimer la ligne d'en-tête
méthode de mise à niveau Win10
Pourquoi ne puis-je pas accéder au navigateur Ethereum ?
Comment apprendre le C# à partir de zéro
Que sont les bases de données en mémoire ?
unicode en chinois
Pourquoi la page Web de l'espace QQ ne peut-elle pas être ouverte ?
Méthode de projet de démarrage Webstorm
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
