还是先上效果图
思路
输入框,按钮,表格,分页等都是用的elementul的组件。
获取数据的方法:
写一个请求方法,去后台获取列表的数据,同时把你的当前页和每页显示多少条的变量发给后台。然后后端以此判断给你哪一页的数据和每页给你多少条数据。直接给你筛选完返回给你,然后你把数据给到你的表格数据的变量,比如我这里的dataList: []。然后你的el-table就可以用属性:data="dataList"把数据渲染出来。就完成了,是不是很简单。这就是核心思路。
点击分页跳转功能:
这个功能更简单,就是elementul的分页组件自带的方法,可以再当前页和每页条数发生变化时回调,也就是触发事件。所以就可以用这个功能来做,当页码或者没页数发生变化时,触发方法,方法内把改变后的页码传给你早就设定好的变量存起来,然后再次调用获取数据的方法,从新拉一遍数据,这时候你的变量内页码已经变了,所以拉出来的数据自然也是对应页面的数据。
上代码
建议结合我说的思路和我的详细注释来看一遍,你们就应该懂逻辑了。这要是还看不懂的可以评论提问
<template>
<div class="mod-log">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="用户名/用户操作" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
</el-form-item>
</el-form>
<el-table
:header-cell-style='{background:"#f0f0f0",color:"#222",borderRight:"1px solid #d3d3d3"}'
:data="dataList"
stripe
border
v-loading="dataListLoading"
style="width: 100%;min-height:440px;font-size:16px;">
<el-table-column
prop="id"
header-align="center"
align="center"
width="50"
label="ID">
</el-table-column>
<el-table-column
prop="username"
header-align="center"
width="78"
align="center"
label="用户名">
</el-table-column>
<el-table-column
prop="operation"
header-align="center"
:show-overflow-tooltip="true"
width="128"
align="center"
label="用户操作">
</el-table-column>
<el-table-column
prop="time"
header-align="center"
align="center"
width="128"
label="执行时长(毫秒)">
</el-table-column>
<el-table-column
prop="ip"
header-align="center"
align="center"
width="150"
label="IP地址">
</el-table-column>
<el-table-column
prop="createDate"
header-align="center"
align="center"
width="180"
label="创建时间">
</el-table-column>
<el-table-column
prop="method"
header-align="center"
align="center"
width="500"
:show-overflow-tooltip="true"
label="请求方法">
</el-table-column>
<el-table-column
prop="params"
header-align="center"
align="center"
width="800"
:show-overflow-tooltip="true"
label="请求参数">
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
data () {
return {
dataForm: {
//用户搜索框内搜索的值
key: ''
},
//表格获取的数据
dataList: [],
//当前页数
pageIndex: 1,
//每页显示多少条
pageSize: 10,
//总条数
totalPage: 0,
//loading图不显示
dataListLoading: false,
selectionDataList: []
}
},
created () {
//进页面后直接获取数据
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
//loading图显示
this.dataListLoading = true
//发请求获取数据
this.$http({
url: this.$http.adornUrl('/sys/log'),
method: 'get',
params: this.$http.adornParams({
//传过去当前的页码和每页显示多少
'page': this.pageIndex,
'limit': this.pageSize,
//用户搜索输入的值
'key': this.dataForm.key
})
}).then(({data}) => {
//这个code是后台返回的状态码,如果为0代表正常,其他代表出错,这个地方根据你们公司不同情况更改。
if (data && data.code === 0) {
//返回列表数据
this.dataList = data.page.list
//返回分页的总条数
this.totalPage = data.page.totalCount
} else {
//如果状态码不等于0,数据为空
this.dataList = []
this.totalPage = 0
}
//loading图隐藏
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
//把每页的数量给到pageSize
this.pageSize = val
//当前页1
this.pageIndex = 1
//从新获取数据列表
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
//当前页给到pageIndex
this.pageIndex = val
//从新获取数据列表
this.getDataList()
}
}
}
</script>
注意事项:我这里有if判断是data.code === 0,这个是我们公司后台返回的状态码,代表请求成功,如果失败了就会返回别的状态码,就走else了。所以这个地方如果你们复制了,记得改,根据你们公司实际情况更改,不一定你们公司也是以0为成功的,有的可能是200算是成功。