zoukankan      html  css  js  c++  java
  • 表格序号累加( 翻页序号连续 )---更新

    比如说一共有57条数据一页显示10条翻页就是从第11条开始

    原有下标 + (当前页-1) * 每页显示的数据条数 +1

    page 当前页

    limit 每页显示的数据条数

    elementUI

    <el-table-column type="index"= fixed="left" align="center"
    :index="table_index"  //这里绑定一个方法,将返回值赋给index,即表格每行数据的下标>
    </el-table-column>
    
    
    methods: {
        table_index(index){
            return (this.page-1) * this.limit+ index + 1
    }

    iViewUI

    官方文档中说过表格的type类型只可以绑定四个(index、selection、expand、html)

    如果不考虑翻页累加那直接type:index就可以了,累加的话就需要计算所以就不用写了在render中进行计算

    {
        title: "序号",
        slot: "id",
        render: (h, params) => {
         return h('span', params.index + (this.page - 1) * this.limit + 1)
        }
    }    

    如果分页被封装(iView中使用)

    分页组件:
    //把分页数据传给父组件
    this.$emit("pageIndex",this.limit,this.page,this.total)
    
    父组件接收并执行自定义方法(替换)
    pageIndex2(valIndex){
        this.pageCount.limit = valIndex[0]
        this.pageCount.page = valIndex[1]
        this.pageCount.total = valIndex[2]
    }
    
    使用:
    {
    title: "序号",
    slot: "id",
     163,
    render: (h, params) => {
    return h('span', params.index + (this.pageCount.page- 1) *this.pageCount.limit + 1);
        }
    }
  • 相关阅读:
    android-studio add jar
    android-studio 下载
    fastjson对Date类型的格式化
    springboot多环境区分
    Docker开启远程访问
    docker中批量删除 tag为none的镜像
    项目无法依赖Springboot打出的jar
    Spring Boot使用Swagger2
    mysql表时间戳字段设置
    springMVC dubbo注解无效,service层返回空指针
  • 原文地址:https://www.cnblogs.com/home-/p/11881005.html
Copyright © 2011-2022 走看看