使用vue的v-for生成table , 给table加上序号

本文讲述了在使用Vue和Mybatis分页插件时遇到的为table添加序号的问题。当数据更新后,序号未能正确显示。通过研究发现,需要利用Vue的`Vue.nextTick()`方法来确保DOM更新后再执行序号添加操作,从而解决这个问题。文章还介绍了`Vue.nextTick`的使用场景和工作原理,并提供了一种简单的解决方案,即利用`v-for`的`$index`属性直接在模板中添加序号。
摘要由CSDN通过智能技术生成

现在有一个使用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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值