需求点: 页面数据为前端本地数据,做分页处理。
?上代码~
html:
<div id="app">
<el-table :data="newTableData" style="width: 100%">
<el-table-column prop="id" label="用户ID" width="180">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button @click="deleteItem(scope.$index, scope.row.id)" type="text" size="small">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="5"
layout="total, prev, pager, next" :total="tableData.length">
</el-pagination>
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
currentPage: 1,
newTableData: [],
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 5,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 6,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 7,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 8,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 9,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 10,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 11,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 12,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 13,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 14,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
id: 15,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
created: function () {
this.handleCurrentChange(1)
},
methods: {
handleCurrentChange(index) { //currentPage变动时触发,index值为当前页
this.currentPage = index
this.newTableData = this.tableData.slice((index - 1) * 5, index * 5) //将初始数据进行裁剪赋值给新数组
},
deleteItem(index, id) { //删除操作 index为索引,id为row.id
let newId = this.newTableData[index].id
this.newTableData.splice(index, 1); //从页面显示删除信息
for (let i = 0; i < this.tableData.length; i++) {
if (newId == this.tableData[i].id) {
this.tableData.splice(i, 1) //从初始数据中删除
}
}
if (this.newTableData.length == 0) { //判断当前页面数据长度
if (this.currentPage > 1) { //在当前页面大于1的时候 每次当前页面数据删除完了 就加载前一页的数据
this.handleCurrentChange(this.currentPage - 1)
}
} else {
this.handleCurrentChange(this.currentPage)
}
}
}
})
</script>