vue+elemeng ui 前端处理数据做分页

最新推荐文章于 2024-05-27 15:48:01 发布

爱吃爱喝爱玩儿乐

最新推荐文章于 2024-05-27 15:48:01 发布

阅读量1k

点赞数

分类专栏： JavaScript vue 文章标签： vue element ui 分页

本文链接：https://blog.csdn.net/Ms_alinda/article/details/99696296

版权

vue 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

JavaScript

11 篇文章 1 订阅

订阅专栏

需求点：页面数据为前端本地数据，做分页处理。

?上代码～

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>