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: 每页显示多少条数据。
  • 相关阅读:
    MVC模式简介
    UEditor插入表格没有边框但有间距
    MVC准备前基础知识
    如何关闭ie9烦人的提示信息?
    javaScript中利用ActiveXObject来创建FileSystemObject操作文件
    win7下IIS安装与配置运行网站
    javascript函数
    减小SSN影响
    EMC (电磁兼容性)
    电源完整性设计
  • 原文地址:https://www.cnblogs.com/malng/p/11165610.html
Copyright © 2011-2022 走看看