zoukankan      html  css  js  c++  java
  • vue 实现自定义序号, 并且翻页序号累加。

    近期在项目里遇到 翻页序号累加问题,看了iview 的 api 给出这样

    <template>
        <div>
            <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
            <Button @click="handleClearCurrentRow">Clear</Button>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    columns3: [
                        {
                            type: 'index',
                             60,
                            align: 'center'
                        },
                        {
                            title: 'Name',
                            key: 'name'
                        },
                        {
                            title: 'Age',
                            key: 'age'
                        },
                        {
                            title: 'Address',
                            key: 'address'
                        }
                    ],
                    data1: [
                        {
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park',
                            date: '2016-10-03'
                        },
                        {
                            name: 'Jim Green',
                            age: 24,
                            address: 'London No. 1 Lake Park',
                            date: '2016-10-01'
                        },
                        {
                            name: 'Joe Black',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park',
                            date: '2016-10-02'
                        },
                        {
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        }
                    ]
                }
            },
            methods: {
                handleClearCurrentRow () {
                    this.$refs.currentRowTable.clearCurrentRow();
                }
            }
        }
    </script>

    但是 这样实现不了翻序号累加问题。研究了下  最后  把序号那列加个 render 函数进行了处理就好了   切记 要把原始的  type: 'index', 给干掉,

    改版以后:

            {
              title: 'NO',
              render: (h, params) => {
                return h("span", params.index + (this.pageNum - 1) * this.pageSize + 1);
              },
              align: 'center',
               60
            },
    pageNum :页码。
    pageSize: 每页显示多少条数据。
  • 相关阅读:
    Satellite Basics
    Antenna basics
    Installing a Sailor 900 VSAT
    Installing Intellian VSAT
    IPTV、DVB、OTT的区别
    STM32两种下载方式
    Postman 使用指南
    elasticsearch term 查询之一
    Elasticsearch -from + size设置
    TIMESTAMP和DATETIME的区别
  • 原文地址:https://www.cnblogs.com/malng/p/11165610.html
Copyright © 2011-2022 走看看