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