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

最新推荐文章于 2024-07-26 14:03:04 发布

弓长张_木子李

最新推荐文章于 2024-07-26 14:03:04 发布

阅读量1.6w

点赞数

本文链接：https://blog.csdn.net/qq_21104515/article/details/79154862

版权

本文讲述了在使用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