elemen-ui 分页

element-ui 分页

<template> <div> <div class="container"> <div class="handle-box"> <el-button type="primary" class="handle-del mr10" @click="delSelfSelection" >删除选中 </el-button> <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input> </div> <el-table :data="tableData.slice((query.pageIndex-1)*query.pageSize,query.pageIndex*query.pageSize)" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> <el-table-column prop="name" label="用户名"></el-table-column> <el-table-column label="账户余额"> <template slot-scope="scope">￥{{scope.row.money}}</template> </el-table-column> <el-table-column label="头像(查看大图)" align="center"> <template slot-scope="scope"> <el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]" ></el-image> </template> </el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="状态" align="center"> <template slot-scope="scope"> <el-tag :type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')" >{{scope.row.state}} </el-tag> </template> </el-table-column> <el-table-column prop="date" label="注册时间"></el-table-column> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" >编辑 </el-button> <el-button type="success" @click="handleDelete(scope.$index, scope.row)" >删除 </el-button> </template> </el-table-column> </el-table> <div class="pagination"> <Pagination :total="Number(tableData.length)" :page-size="Number(query.pageSize)" @sorter="handlePageChange"></Pagination> </div> </div> <!-- 编辑弹出框 --> <el-dialog title="编辑" :visible.sync="editVisible" width="30%"> <el-form ref="form" :model="form" label-width="70px"> <el-form-item label="用户名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="地址"> <el-input v-model="form.address"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="editVisible = false">取 消</el-button> <el-button type="primary" @click="saveEdit">确 定</el-button> </span> </el-dialog> </div> </template> <script> import Pagination from "../components/Pagination"; export default { components: { Pagination }, data() { return { query: { address: '', name: '', pageIndex: 1, pageSize: 4 }, currentList: [], multipleSelection: [], delList: [], editVisible: false, pageTotal: 0, form: {}, idx: -1, id: -1, addVisible:false }; }, created() { this.getData(); }, computed: { tableData() { var arr = []; if (this.query.name === '' || this.query.address === '') { return arr = this.currentList } arr = this.currentList.filter(ele => { return ele.name.indexOf(this.query.name) !== -1 && ele.address.includes(this.query.address) }); return arr } }, methods: { saveAdd(){ console.log('点击') }, // 获取 easy-mock 的模拟数据 getData() { this.$axios.get('/table.json').then(res => { console.log(res) this.currentList = res.data.list; this.pageTotal = res.pageTotal; }) }, // 删除操作 handleDelete(index, row) { // 二次确认删除 this.$confirm('确定要删除吗？', '提示', { type: 'warning' }).then(() => { this.$message.success('删除成功'); this.tableData.splice(index, 1); }).catch(() => { }); }, // 多选操作 handleSelectionChange(val) { this.multipleSelection = val; }, // 单个删除 delSelfSelection(){ for(var i = 0;i < this.multipleSelection.length; i++) { for(var j = 0; j < this.tableData.length; j++) { if(this.tableData[j].id === this.multipleSelection[i].id) { this.tableData.splice(j,1); j--; } } } }, // 编辑操作 handleEdit(index, row) { this.idx = index; this.form = row; this.editVisible = true; }, // 保存编辑 saveEdit() { this.editVisible = false; this.$set(this.tableData, this.idx, this.form); }, // 分页导航 handlePageChange(val) { this.$set(this.query, 'pageIndex', val); this.getData(); } } }; </script> <style scoped> .handle-box { margin-bottom: 20px; } .handle-select { width: 120px; } .handle-input { width: 300px; display: inline-block; } .table { width: 100%; font-size: 14px; } .mr10 { margin-right: 10px; } .table-td-thumb { display: block; margin: auto; width: 40px; height: 40px; } </style>