近期在项目里遇到 翻页序号累加问题,看了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: 每页显示多少条数据。