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('点击')
},
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>