给table加上序号,for生成table并给table加上序号的实例代码

By admin in 4858美高梅 on 2019年4月26日

现今有一个选择mybatis的分页插件生成的table,table中多少是由此vue获得的 , 前台展现应用<tr v-for=”item in items”>

近日有3个利用mybatis的分页插件生成的table,table中数量是由此vue获得的 , 前台显示采纳<tr v-for=”item in items”>

今昔有1个使用mybatis的分页插件生成的table,table中多少是透过vue获得的
, 前台显示选拔<tr v-for=”item in items”>

本文重要给大家介绍了有关Vue.nextTick()的正确性行使,分享出去供大家参考学习,上面话不多说了,来共同看看详细的介绍吧。

后台vue获取数据使用分页插件实行查询然后利用回调,将结果回到给vue的1个model

后台vue获取数据使用分页插件举行查询然后使用回调,将结果回到给vue的1个model

后台vue获取数据使用分页插件实行询问然后使用回调,将结果重回给vue的三个model

什么是Vue.nextTick()给table加上序号,for生成table并给table加上序号的实例代码。

/**
 * 分页控件加载
 * @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);
            }
        }
    });
}
/**
 * 分页控件加载
 * @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);
            }
        }
    });
}
/**
 * 分页控件加载
 * @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);
      }
    }
  });
}

合法文书档案解释如下:

 

 

须要是:给生成的table增加序号

在下次 DOM
更新循环停止今后推行延迟回调。在更动数据之后随即选用这几个方法,获取更新后的
DOM。

需倘使:给生成的table增添序号

急需是:给生成的table增多序号

刚初步运用js的函数

自己明白的合法文书档案的那句话的基本点在最终那半句获取更新后的DOM,获取更新后的DOM话中有话正是什么操作必要运用了翻新后的DOM而不可能利用从前的DOM也许应用更新前的DOM或出难点,所以就衍生出了那么些获得更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的施行的应当是会对DOM实行操作的
js代码,比如Swiper扩充包的

刚初步采取js的函数

刚早先使用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);
  }
}
var swiper = new Swiper('.swiper-container', {
   pagination: '.swiper-pagination',
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
   paginationClickable: true,
   spaceBetween: 30,
   centeredSlides: true,
   autoplay: 2500,
   autoplayDisableOnInteraction: false
  });
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);
    }
}
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);
    }
}

将上边的诀窍放在点击生成table的轩然大波上 ,
能够来得序号,接着点击分页的下一页或许页数,跳转到下1页的时候,序号消失了,

几时要求用的Vue.nextTick()

将方面包车型客车主意放在点击生成table的风浪上 ,
能够展现序号,接着点击分页的下一页也许页数,跳转到下一页的时候,序号消失了,

将位置的法子放在点击生成table的事件上 ,
能够显得序号,接着点击分页的下1页或然页数,跳转到下1页的时候,序号消失了,

很自然的想到在点击下一页后也理应有加多序号的操作,于是找到展现下1页数据的办法,加上上边的js方法,结果未有生效,

  • 你在Vue生命周期的created()钩子函数进行的DOM操作必然要放在Vue.nextTick()的回调函数中。原因是什么啊,原因是在created()钩子函数施行的时候DOM
    其实并未有实行别的渲染,而那时进展DOM操作未有差距于徒劳,所以那里一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的便是mounted钩子函数,因为该钩子函数推行时具有的DOM挂载和渲染都已做到,此时在该钩子函数中张开任何DOM操作都不会有有失水准态。
  • 在数额变化后要奉行的某部操作,而以此操作需求运用随多寡变动而改换的DOM结构的时候,这些操作都应有放Vue.nextTick()的回调函数中。

很当然的想到在点击下1页后也理应有加多序号的操作,于是找到显示下一页数据的点子,加上地点的js方法,结果未有生效,

很当然的想到在点击下壹页后也应当有增添序号的操作,于是找到展现下1页数据的法子,加上上边的js方法,结果尚未奏效,

民用感到是意识到数据后rownum方法在dom没刷新前举办了丰盛,然后dom更新后,序号消失了

案由是,Vue是异步实践dom更新的,1旦观看到数量变动,Vue就会议及展览开2个队列,然后把在同2个轩然大波循环
(event loop) 当中观看到数量变化的 watcher
推送进那么些队列。如若那么些watcher被触发数次,只会被推送到行列二回。那种缓冲行为足以有效的解除重复数据形成的不需要的计量和DOm操作。而在下三个事变循环时,Vue会清空队列,并张开要求的DOM更新。

个人以为是意识到数据后rownum方法在dom没刷新前进展了拉长,然后dom更新后,序号消失了

村办感觉是识破数据后rownum方法在dom没刷新前拓展了丰硕,然后dom更新后,序号消失了

经过寻觅资料最终像下边那样使用消除了难点 ,
在每种现身分页查询的地点都增加 Vue.nextTick(function(){})方法

当您设置 vm.someData = 'new value',DOM
并不会应声更新,而是在异步队列被铲除,也便是下3个轩然大波循环起来时实行更新时才会进行要求的DOM更新。要是那时候您想要依照更新的
DOM 状态去做一点事情,就会油不过生难点。。为了在数据变动之后等待 Vue
实现更新 DOM ,能够在数量变化今后立刻利用 Vue.nextTick(callback)
。那样回调函数在 DOM 更新完毕后就会调用。

通过寻觅资料最后像上面这样使用化解了难题 ,
在种种出现分页查询的地点都助长
Vue.nextTick(function(){})方法

由此查找资料最后像上面这样使用化解了难点 ,
在每一个出现分页查询的地方都抬高
Vue.nextTick(function(){})方法

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

总结

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

一、vm.$nextTick( [callback] )

以上正是那篇小说的全体内容了,希望本文的剧情对大家的学习大概干活能推动一定的协助,要是不寻常大家可以留言交流,多谢大家对剧本之家的帮衬。

 

 

二、Vue.nextTick( [callback, context] )

你只怕感兴趣的篇章:

  • 大约明了Vue中的nextTick方法
  • 浅谈Vuejs中nextTick()异步更新队列源码解析
  • 详解Vue + Vuex 怎么着利用
    vm.$nextTick
  • 浅谈Vue.nextTick
    的完毕方式
  • Vue中之nextTick函数源码分析详解
  • 详解从Vue.js源码看异步更新DOM计谋及nextTick
  • vue.js全局API之nextTick全面剖析
  • vue之nextTick周密剖析
  • 深切驾驭Vue nextTick 机制

一、vm.$nextTick(
[callback] )

一、vm.$nextTick(
[callback] )

叁、异步更新队列

 

 

 实例

4858美高梅 1

4858美高梅 2

<ul id="demo">
  <li v-for="item in list">{{item}}</div>
</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渲染已经完成')
      })
    }
  }})

 

 

或者

 

 

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

 

 

怎么时候要求用的Vue.nextTick()

二、Vue.nextTick(
[callback, context] )

二、Vue.nextTick(
[callback, context] )

您在Vue生命周期的created()钩子函数实行的DOM操作必然要放在Vue.nextTick()的回调函数中。原因是如何啊,原因是在created()钩子函数施行的时候DOM
其实并未开始展览任何渲染,而那时候展开DOM操作一点差距也未有于徒劳,所以那里一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之相应的就是mounted钩子函数,因为该钩子函数实践时持有的DOM挂载和渲染都已到位,此时在该钩子函数中开始展览其余DOM操作都不会反常。

 

 

在数量变动后要奉行的某部操作,而这么些操作需求使用随多寡变动而改变的DOM结构的时候,那些操作都应有放进Vue.nextTick()的回调函数中。

4858美高梅 3

4858美高梅 4

Vue是异步推行dom更新的,一旦观察到多少变动,Vue就会展开一个行列,然后把在同1个风云循环
(event loop) 其中阅览到数码变动的 watcher
推送进那些行列。假诺那一个watcher被触发数11遍,只会被推送到行列贰遍。那种缓冲行为能够使得的解除重复数据产生的不须求的测算和DOm操作。而在下一个事件循环时,Vue会清空队列,并开展要求的DOM更新。

 

 

当你设置

三、异步更新队列

3、异步更新队列

 vm.someData = 'new value',DOM

 

 

并不会即时更新,而是在异步队列被免去,约等于下三个事件循环开端时实行更新时才会进展须求的DOM更新。假若那时候您想要依照更新的
DOM

4858美高梅 5

4858美高梅 6

气象去做一些事情,就会并发难点。。为了在数据变动之后等待 Vue 完结更新
DOM ,能够在数量变动之后随即选拔

 

 

Vue.nextTick(callback) 。那样回调函数在 DOM 更新达成后就会调用。

 实例

 实例

总结:

<ul id="demo">
    <li v-for="item in list">{{item}}</div>
</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渲染已经完成')
            })
        }
    }})
<ul id="demo">
    <li v-for="item in list">{{item}}</div>
</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渲染已经完成')
            })
        }
    }})

* `Vue.nextTick(callback)`,当数码发生变化,更新后进行回调。
* `Vue.$nextTick(callback)`,当dom发生变化,更新后施行的回调。

或者

或者

上述所述是我给我们介绍的应用vue的v-for生成table并给table加上序号,希望对我们有所帮助,假如大家有其余疑问请给本身留言,我会及时恢复生机我们的。在此也格外谢谢大家对剧本之家网址的支撑!

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

您只怕感兴趣的小说:

  • 浅谈Vue贰.0中v-for迭代语法的浮动(key、index)
  • 浅析vue中常见循环遍历指令的施用
    v-for
  • 动用vue中的v-for遍历2维数组的诀窍
  • 赶尽杀绝vue组件中利用v-for出现告警难题及v
    for指令介绍
  • vue二.0移除或退换的一部分东西(移除index
    key)
  • Vue中的v-for循环key属性注意事项小结

 

 

 

 

4858美高梅,怎样时候需求用的Vue.nextTick()

 

  1. 你在Vue生命周期的created()钩子函数实行的DOM操作必然要放在Vue.nextTick()的回调函数中。原因是什么啊,原因是在created()钩子函数执行的时候DOM
    其实并没有开始展览任何渲染,而此时开始展览DOM操作无异于徒劳,所以那边一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之相应的便是mounted钩子函数,因为该钩子函数推行时享有的DOM挂载和渲染都已成功,此时在该钩子函数中进行别的DOM操作都不会极度。

  2. 在多少变动后要实行的某个操作,而这个操作亟待选择随多寡变动而更改的DOM结构的时候,这些操作都应有放进Vue.nextTick()的回调函数中。

Vue是异步试行dom更新的,1旦观看到数量变动,Vue就会开启3个队列,然后把在同二个事件循环
(event loop) 个中观察到数量变动的 watcher
推送进那几个行列。纵然这些watcher被触发多次,只会被推送到行列叁次。那种缓冲行为足以使得的消除重复数据变成的不必要的总结和DOm操作。而在下1个风云循环时,Vue会清空队列,并拓展供给的DOM更新。
当您设置 vm.someData = ‘new value’,DOM
并不会即时更新,而是在异步队列被清除,也正是下一个事件循环开头时实行更新时才会进展须要的DOM更新。假如此时你想要依据更新的
DOM 状态去做一些事情,就会产出难点。。为了在多少变动之后等待 Vue
完结更新 DOM ,能够在数量变动之后马上利用 Vue.nextTick(callback)
。那样回调函数在 DOM 更新落成后就会调用。

 

总结:

*
`Vue.nextTick(callback)`,当数码产生变化,更新后举行回调。
*
`Vue.$nextTick(callback)`,当dom发生变化,更新后进行的回调。

 

切实能够参考:

 

其余一种轻易方法:

 

 <tr v-for="(index,item) in demo">
     <td>
         <input type="checkbox" name="Checkbox" class="check" value="{{item.id}}" style="float:none;height:auto;">
         {{$index + 1}}
     </td>
</tr>

 

给各类循环的目的加上index , 使用{{$index}}获取该对象所在地点, 从0初始,
然后加一, 产生{{$index + 一}},那正是彰显在页面的剧情了

功效如下:

             
4858美高梅 7

 

什么样时候必要用的Vue.nextTick()

 

  1. 您在Vue生命周期的created()钩子函数实行的DOM操作必然要放在Vue.nextTick()的回调函数中。原因是什么样啊,原因是在created()钩子函数实践的时候DOM
    其实并未有举办别的渲染,而那时实行DOM操作一点差异也未有于徒劳,所以那边一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之相应的正是mounted钩子函数,因为该钩子函数推行时具备的DOM挂载和渲染都已产生,此时在该钩子函数中开始展览别的DOM操作都不会有标题。

  2. 在多少变动后要施行的某个操作,而这个操作内需采用随多寡变动而改动的DOM结构的时候,这一个操作都应当放进Vue.nextTick()的回调函数中。

Vue是异步实践dom更新的,1旦观望到数码变动,Vue就会张开三个系列,然后把在同2个事变循环
(event loop) 个中观望到数码变化的 watcher
推送进那个队列。假使这些watcher被触发多次,只会被推送到行列2遍。那种缓冲行为足以有效的破除重复数据变成的不须求的总计和DOm操作。而在下2个轩然大波循环时,Vue会清空队列,并进行要求的DOM更新。
当您设置 vm.someData = ‘new value’,DOM
并不会立时更新,而是在异步队列被免除,也正是下三个事件循环起首时实行更新时才会进展要求的DOM更新。假若此刻您想要依据更新的
DOM 状态去做一点事情,就会见世问题。。为了在数量变化以往等待 Vue
实现换代 DOM ,能够在数码变动以往登时使用 Vue.nextTick(callback)
。那样回调函数在 DOM 更新完毕后就会调用。

 

总结:

*
`Vue.nextTick(callback)`,当数码产生变化,更新后实施回调。
*
`Vue.$nextTick(callback)`,当dom爆发变化,更新后实行的回调。

 

实际可以参照:

 

其余一种简单方法:

 

 <tr v-for="(index,item) in demo">
     <td>
         <input type="checkbox" name="Checkbox" class="check" value="{{item.id}}" style="float:none;height:auto;">
         {{$index + 1}}
     </td>
</tr>

 

给种种循环的靶子加上index , 使用{{$index}}获取该对象所在地方, 从0开首,
然后加壹, 形成{{$index + 1}},那正是体未来页面包车型地铁内容了

意义如下:

              4858美高梅 8

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有