集成table分页
2020-10-13 本文已影响0人
刘书生
结合Table组件和Page组件，做了一个简单封装，对后台返回的数据类型有一定要求
image.png
以及请求方式有一定要求，获取数据是GET请求，删除是DELETE，增加是POST
再者你就是引入了ajax
在遵循上述条件下，使用起来就比较简单
-
第一步，引入
image.png
-
第二步，配置
<Table
:columns="columns"
:url="'/apigw/api'" // 这是你后台APi接口
ref="table"
></Table>
columns: [
{
title: "ID",
key: "id",
},
{
title: "NAME",
key: "name",
},
],
如果你要使用请求后的数据，或者对请求参数有改变
image.png
第一个参数是请求参数，第二个是响应回来的数据
<template>
<Card>
<Table
:data="data"
:columns="columns"
:stripe="stripe"
:border="border"
:show-header="showHeader"
:loading="loading"
:disabled-hover="disabledHover"
:highlight-row="highlightRow"
:size="size"
:draggable="draggable"
>
</Table>
<div style="margin: 10px; overflow: hidden">
<div style="float: right">
<Page
show-elevator
show-sizer
:total="dataTotal"
:current="dataCurrent"
@on-change="changePage"
@on-page-size-change="changeSize"
></Page>
</div>
</div>
</Card>
</template>
<script>
export default {
props: {
url: {
type: String,
},
show: {
type: Function,
default: function (index) {
this.$Modal.info({
title: "User Info",
content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
});
},
},
remove: {
type: Function,
default: function (index) {
this.data.splice(index, 1);
},
},
columns: {},
stripe: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: false,
},
showHeader: {
type: Boolean,
default: true,
},
loading: {
type: Boolean,
default: false,
},
disabledHover: {
type: Boolean,
default: false,
},
highlightRow: {
type: Boolean,
default: false,
},
size: {
type: String,
},
draggable: {
type: Boolean,
default: false,
},
},
data() {
this.columns.push({
title: "Action",
key: "action",
width: 150,
align: "center",
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.show(params.index);
},
},
},
"View"
),
h(
"Button",
{
props: {
type: "error",
size: "small",
},
on: {
click: () => {
this.remove(params.index);
},
},
},
"Delete"
),
]);
},
});
return {
data: [],
dataTotal: null, // 页面数据总数
dataCurrent: 1, // 当前页面记录
dataSize: 10, // 每个页面显示的条数
};
},
mounted() {
},
methods: {
changePage(current) {
this.dataCurrent = current;
var that = this;
this.query(null, function (data) {
that.data = data.data.data;
});
},
changeSize(dataSize) {
this.dataSize = dataSize;
var that = this;
this.query(null, function (data) {
that.data = data.data.data;
});
},
query(params, callback) {
if (!params) {
params = {
page: this.dataCurrent,
pageSize: this.dataSize,
};
}
var that = this;
that.axios
.get(that.url, {
params: params,
})
.then(function (res) {
that.dataTotal = res.data.total;
that.data = res.data.data;
if (callback) {
callback(res);
}
});
},
},
};
</script>
