vue+iview实现table和分页及与后台数据交互

时间:2023-03-09 16:03:36
vue+iview实现table和分页及与后台数据交互

最近在项目中遇到使用table分页的功能,所以分享出来给大家希望能够对大家有帮助,话不多说直接上代码

 <template>
<div>
<Table :columns="historyColumns" :data="historyData"></Table>
<Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage" @on-page-size-change="pages" show-sizer show-elevator show-total></Page>
</div>
</template>
<style scoped>
.paging {
float: left;
margin-top: 10px;
}
</style>
<script>
import Cookies from 'js-cookie'; export default {
data() {
return {
ajaxHistoryData: [],
// 初始化信息总条数
dataCount: 0,
// 每页显示多少条
pageSize: 10,
xia: 0, //下一页或者上一页的第一项索引值
historyColumns: [{
"type": "selection",
"align": "center",
"width": "30",
"className": "border-r"
}, {
"title": "用户名",
"align": "center",
"key": "username"
}, {
"title": "姓名",
"align": "center",
"key": "name"
}, {
"title": "所属组织机构",
"align": "center",
"key": "deptName"
}, {
"title": "状态",
"align": "center",
"key": "status"
}, {
"title": "联系电话",
"align": "center",
"key": "mobile" }, {
'title': '操作',
'align': 'center',
'key': 'action',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'ios-baseball',
size: 16
},
style: {
marginLeft: '20px'
} }) ]) }
}],
historyData: []
}
},
methods: {
// 获取历史记录信息
handleListApproveHistory() {
let sessionId = Cookies.get('status');
let this1 = this;
this.$http({
headers: {
"Authorization": sessionId,
},
method: 'post',
url: this1.GLOBAL.BASE_URL + '/sys/user/list',
params: {
'deptId': '001',
'offset': 0, //第一页第一项的索引
'limit': 10, //每页显示的条数
},
})
.then(function(res) {
debugger
this1.ajaxHistoryData = res.data.data;
this1.dataCount = res.data.total; this1.historyData = this1.ajaxHistoryData;
})
.catch(function(error) {
//
}) },
pages(num) { //修改每页显示条数时调用
debugger
this.pageSize = num;
this.changepage(1);
},
changepage(index) {
//index当前页码
this.xia = (index - 1) * this.pageSize; let sessionId = Cookies.get('status');
let this1 = this;
this.$http({
headers: {
"Authorization": sessionId,
},
method: 'post',
url: this1.GLOBAL.BASE_URL + '/sys/user/list',
params: {
'deptId': '001',
'offset': this1.xia,
'limit': this1.pageSize,
},
})
.then(function(res) {
debugger
this1.historyData = res.data.data;
})
.catch(function(error) {
//
})
}
},
created() {
this.handleListApproveHistory();
}
}
</script>

代码中一些重要的部分都有标记了注释,如果还有不懂得地方大家可以留言

下面是我的公众号,欢迎大家关注,可以一起学习一起进步:

vue+iview实现table和分页及与后台数据交互