iview官网Page组件的属性如下
<template>
<div class="list">
<div>
<Table border :columns="columns12" :data="tabledata">
<template slot-scope="{ row }" slot="name">
<strong>{{ row.name }}</strong>
</template>
<template slot-scope="{ row, index }" slot="action">
<Button
type="primary"
size="small"
style="margin-right: 5px"
@click="show(index)"
>View</Button
>
<Button type="error" size="small" @click="remove(index)"
>Delete</Button
>
</template>
</Table>
</div>
<div class="page-wrap">
<Page :total="total" show-elevator @on-change="changePage" />
</div>
</div>
</template>
<script>
export default {
name: "MyTable",
data() {
return {
a: 10,
//表头
columns12: [
{
title: "Name",
slot: "name",
},
{
title: "Age",
key: "age",
},
{
title: "Address",
key: "address",
},
{
title: "Action",
slot: "action",
width: 150,
align: "center",
},
],
//获取的待展示数据
data6: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
},
],
//表格数据
tabledata: [],
};
},
// props: ["a", "columns12", "data6"],
methods: {
//对话框展示用户详情
show(index) {
this.$Modal.info({
title: "User Info",
content: `Name:${this.tabledata[index].name}<br>Age:${this.tabledata[index].age}<br>Address:${this.tabledata[index].address}`,
});
},
//删除用户信息
remove(index) {
this.tabledata.splice(index, 1);
},
//页码改变(index=当前页码)
changePage(index) {
this.tabledata = this.data6.slice((index-1) * 10, index * 10);
},
},
//数据总数
computed: {
total: function () {
return this.data6.length;
},
},
//初始化第一页数据
mounted(){
this.changePage(1);
}
};
</script>
<style>
.page-wrap{
margin: 20px auto;
}
</style>
效果如下,最简单的分页:
写完之后发现iview官网有完整的示例了,可以直接用惹