iview 分页

iview 分页

 

 <i-table border :columns="columnArr1" :data="tableData1" height="215" style="margin: 20px;height: 215px">
</i-table>

 <Page :total="pageTotal" size="small" show-total show-sizer :page-size="pageSize" :page-size-opts="[1,2,3]"  show-elevator @on-change="pageChange" :transfer="true"/>

 data() {
            return {

               pageNumber: 1, //表格当前页
                pageSize: 4, //每页显示数量
                pageTotal: 40, //数据总记录数

    columnArr1: [
                    {key: 'index',type: 'index',width: 70,title: '序号',align: 'center',slot: '',fixed:'left',render: (h, params) => {
                            return h('span', params.index + (this.pageNumber- 1) * this.pageSize + 1);}
                    },
                    {field: 'ftaxcode', title: '征收项目',width:120, align: 'left'},
                    {field: 'ftaxitemcode', title: '征收品目',width:120, align: 'left'},
                    {field: 'fexemptiontype', title: '减免征类型',width:120, align: 'left'},
                    {field: 'freductiontype', title: '减免类型', width:120,align: 'left'},
                    {field: 'freductionmode', title: '减免方式',width:120, align: 'left'},
                    {field: 'fbigtype', title: '减免性质大类', width:150,align: 'left'},
                    {field: 'fratio', title: '减征税率', width:120,align: 'right'},
                    {field: 'fsmalltype', title: '减免性质小类', width:150,align: 'left'},
                    {field: 'famount', title: '减征额度',width:120, align: 'right'},
                    {field: 'frange', title: '减征幅度', width:120,align: 'left'},
                    {field: 'fbegdate', title: '减免期限起', width:120,align: 'center'},
                    {field: 'fenddate', title: '减免期限止',width:120, align: 'center'},
                    {field: 'fdate', title: '录入日期', width:120,align: 'center'},
                ],

}