使用vue的v-for生成table并给table加上序号的实例代码


Posted in Javascript onOctober 27, 2017

现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用<tr v-for="item in items">

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

/**
 * 分页控件加载
 * @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添加序号

刚开始使用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);
  }
}

将上面的方法放在点击生成table的事件上 , 可以显示序号,接着点击分页的下一页或者页数,跳转到下一页的时候,序号消失了,

很自然的想到在点击下一页后也应该有添加序号的操作,于是找到显示下一页数据的方法,加上上面的js方法,结果没有生效,

个人觉得是查出数据后rownum方法在dom没刷新前进行了添加,然后dom更新后,序号消失了

通过查找资料最终像下面这样使用解决了问题 , 在每个出现分页查询的地方都加上 Vue.nextTick(function(){})方法

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

一、vm.$nextTick( [callback] )

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

三、异步更新队列

 实例

<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生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

当你设置

vm.someData = 'new value',DOM

并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM

状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用

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

总结:

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

以上所述是小编给大家介绍的使用vue的v-for生成table并给table加上序号,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 去除Array中的null值示例代码
Nov 20 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 #Javascript
vue中的event bus非父子组件通信解析
Oct 27 #Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 #Javascript
webpack配置之后端渲染详解
Oct 26 #Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 #Javascript
node文字生成图片的示例代码
Oct 26 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
php后门URL的防范
2013/11/12 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jquery中radio checked问题
2015/03/16 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
详解Python字符串对象的实现
2015/12/24 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
信息技术培训感言
2014/03/06 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
环保倡议书400字
2014/05/15 职场文书
合作协议书模板2014
2014/09/26 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
信仰观后感
2015/06/03 职场文书
在js中修改html body的样式
2021/11/11 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
利用Java连接Hadoop进行编程
2022/06/28 Java/Android