vue实现table分页以及用户手动筛选
话不多说上预览图
由于没有与后端对接,所以这块的数据为假数据
功能点:用户可以对状态进行筛选
分页部分:
<!-- 分页组件-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.currentPage"
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, next, jumper"
prev-text="上一页"
next-text="下一页"
:total="total">
</el-pagination>
先写好分页组件
getTableData(){
let data = {
offset: this.queryInfo.currentPage,
size: this.queryInfo.size
}
console.log("offset为" + data.offset)
this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
if(res.data.state){
console.log(res.data.msg);
this.tableData=res.data.data.list
this.total = res.data.data.total
}else{
this.$message.error(res.data.msg)
}
})
},
从后端获取table数据的方法
getTableDataOne(){
let data = {
offset: this.queryInfo.currentPage,
size: this.queryInfo.size,
status: this.status
}
console.log("offset为" + data.offset)
this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
if(res.data.state){
console.log(res.data.msg);
this.tableData=res.data.data.list
this.total = res.data.data.total
}else{
this.$message.error(res.data.msg)
}
})
},
通过筛选条件(status)从后端获取数据的方法
handleSizeChange (newSize) {
console.log(`每页 ${newSize} 条`)
this.queryInfo.size = newSize
//size改变时currentPage应该为1
this.queryInfo.currentPage = 1
if(this.flag === 1){
this.getTableData()
}else{
this.getTableDataOne()
}
},
监听size改变的事件
通过flag来判断用户是否进行了筛选,如果在筛选状态调用getTableDataOne()方法来获取table数据,反之则调用getTableData()方法来获取table数据
handleCurrentChange (newPage) {
console.log(`当前页: ${newPage}`)
this.queryInfo.currentPage = newPage
if(this.flag === 1){
this.getTableData()
}else{
this.getTableDataOne()
}
},
监听页码值改变的事件
筛选部分
<el-table-column
label="状态"
prop="status"
:filters="[{ text: '待平台确认', value: 0 }, { text: '平台已确认', value: 1}]"
filter-placement="bottom-end"
column-key="status"
>
<template slot-scope="scope">
<label v-if="scope.row.status === 0">待平台确认</label>
<label v-if="scope.row.status === 1">平台已确认</label>
</template>
</el-table-column>
筛选组件在elementui中有相应模板
<el-table
:data="tableData.filter(data => !search || data.cashFlow.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%"
:header-cell-style="{background:'#dcdde3',color:'black'}"
border
size="small"
@filter-change="handleFilterChange"
>
table标签中加入@filter-change="handleFilterChange"对筛选进行监听
handleFilterChange(filters){
this.queryInfo.currentPage = 1
console.log(filters.status[0])
if(filters.status[0] === 0){
this.status = 0
this.getTableDataOne()
this.flag = 0
}
if(filters.status[0] === 1){
this.status = 1
this.getTableDataOne()
this.flag = 0
}
if(filters.status[1] === 0||filters.status[1] === 1){
this.flag = 1
this.getTableData()
}
if(filters.status[0] === undefined){
this.flag = 1
this.getTableData()
}
},
flag: 1
筛选的监听事件
flag为1是未筛选状态,为0是筛选状态
filters.status[0]的值代表第一个筛选条件(0和1区分待平台确认和平台已确认)
filters.status[1]的值代表第二个筛选条件,若存在filters.status[1]即(filters.status[1] === 0||filters.status[1] === 1),则说明对两个条件都进行了筛选,调用getTableData()方法
如果filters.status[0] === undefined则说明没有进行筛选,调用getTableData()方法
完整代码:
<template>
<div id="comInfo">
<div class="tags">
<el-tag type="info" color="#0066cc" effect="dark">保证金账户台账</el-tag>
</div>
<el-table
:data="tableData.filter(data => !search || data.cashFlow.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%"
:header-cell-style="{background:'#dcdde3',color:'black'}"
border
size="small"
@filter-change="handleFilterChange"
>
<el-table-column
label="序号"
type="index">
</el-table-column>
<el-table-column
label="资金流水号"
prop="cashFlow">
</el-table-column>
<el-table-column
label="业务类型"
prop="type">
<template slot-scope="scope">
<label v-if="scope.row.type === 0">预存</label>
<label v-else-if="scope.row.type === 1">申请退款</label>
<label v-else-if="scope.row.type === 2">报价保证金支付</label>
<label v-else-if="scope.row.type === 3">履约保证金支付</label>
<label v-else-if="scope.row.type === 4">报价保证金退款</label>
<label v-else>履约保证金退款</label>
</template>
</el-table-column>
<el-table-column
label="状态"
prop="status"
:filters="[{ text: '待平台确认', value: 0 }, { text: '平台已确认', value: 1}]"
filter-placement="bottom-end"
column-key="status"
>
<template slot-scope="scope">
<label v-if="scope.row.status === 0">待平台确认</label>
<label v-if="scope.row.status === 1">平台已确认</label>
</template>
</el-table-column>
<el-table-column
label="金额"
prop="amount">
</el-table-column>
<el-table-column
label="余额"
prop="balance">
</el-table-column>
<el-table-column
label="操作员"
prop="adminName">
</el-table-column>
<el-table-column
label="操作时间"
prop="gmtModified"
:formatter="dateFormat">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button size="small"
style="background: rgba(43,177,243,0.32)"
@click="check(scope.$index, scope.row)">
查看
</el-button>
</template>
</el-table-column>
//不显示的列
<el-table-column
label="id"
prop="id"
v-if="show">
</el-table-column>
<el-table-column
label="adminId"
prop="adminId"
v-if="show">
</el-table-column>
</el-table>
<el-row>
<el-col :span="9" :offset="15">
<!-- 分页组件-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.currentPage"
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, next, jumper"
prev-text="上一页"
next-text="下一页"
:total="total">
</el-pagination>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'AdminMarginAccount',
data () {
return {
//是否显示列
show: false,
queryInfo: {
//初始页
currentPage: 1,
//当前每页显示多少条数据
size: 10,
},
//表格假数据
tableData: [
{
cashFlow: '123',
type: 1,
status: 0,
amount: 1200,
balance: 1200,
adminName: '张三',
gmtModified: '',
id: '1',
adminId: '1'
},
{
cashFlow: '230',
type: 0,
status: 1,
amount: 1200,
balance: 1200,
adminName: '李四',
gmtModified: '',
id: '2',
adminId: '2'
}
],
search: '',
total: '',
data: {
id: '',
companyId: '',
cashFlow: '',
type: '',
status: '',
amount: '',
balance: '',
remitTime: '',
voucher: '',
adminId: '',
adminName: '',
gmtCreated: '',
gmtModified: ''
},
status: 0,
flag: 1,
}
},
methods: {
getTableData(){
let data = {
offset: this.queryInfo.currentPage,
size: this.queryInfo.size
}
console.log("offset为" + data.offset)
this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
if(res.data.state){
console.log(res.data.msg);
this.tableData=res.data.data.list
this.total = res.data.data.total
}else{
this.$message.error(res.data.msg)
}
})
},
getTableDataOne(){
let data = {
offset: this.queryInfo.currentPage,
size: this.queryInfo.size,
status: this.status
}
console.log("offset为" + data.offset)
this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
if(res.data.state){
console.log(res.data.msg);
this.tableData=res.data.data.list
this.total = res.data.data.total
}else{
this.$message.error(res.data.msg)
}
})
},
// 监听size改变的事件
handleSizeChange (newSize) {
console.log(`每页 ${newSize} 条`)
this.queryInfo.size = newSize
//size改变时currentPage应该为1
this.queryInfo.currentPage = 1
if(this.flag === 1){
this.getTableData()
}else{
this.getTableDataOne()
}
},
//监听页码值改变的事件
handleCurrentChange (newPage) {
console.log(`当前页: ${newPage}`)
this.queryInfo.currentPage = newPage
if(this.flag === 1){
this.getTableData()
}else{
this.getTableDataOne()
}
},
// filterStatus(value, row){
// return row.status === value;
// },
//转换日期格式
dateFormat(row, column) {
var d = new Date(row.gmtModified);
var year = d.getFullYear();
var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
},
handleFilterChange(filters){
this.queryInfo.currentPage = 1
console.log(filters.status[0])
if(filters.status[0] === 0){
this.status = 0
this.getTableDataOne()
this.flag = 0
}
if(filters.status[0] === 1){
this.status = 1
this.getTableDataOne()
this.flag = 0
}
if(filters.status[1] === 0||filters.status[1] === 1){
this.flag = 1
this.getTableData()
}
if(filters.status[0] === undefined){
this.flag = 1
this.getTableData()
}
},
check (index, row) {
console.log(index, row)
this.$router.push("/checkCapitalDeposited/" + row.id)
},
},
created () {
this.getTableData()
}
}
</script>
<style scoped>
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #d3e5e0;
}
.tags {
width: 100%;
border-bottom: 2px solid #0066cc;
}
.first-row div,
.second-row div {
display: inline-block;
width: 300px;
margin: 0 40px;
}
</style>
版权声明：本文为weixin_42860747原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。