1.分页的封装
<template>
<el-pagination
@current-change="handleCurrentChange"
:current-page="current"
:page-size="size"
layout="total,prev, pager, next,jumper,sizes"
:page-sizes="[10, 20, 30, 40, 50]"
background
:pager-count="5"
:total="total"
@size-change="handleSizeChange"
>
</el-pagination>
</template>
<script>
export default {
name: "EPagenation",
props: {
total: {
default: 0,
type: Number,
},
},
data() {
return {
size: 10,
current: 1,
};
},
methods: {
init() {
this.current = 1;
this.size = 10;
},
handleCurrentChange(val) {
this.current = val;
this.$emit("currentPageClick", { nCurrent: val, nSize: this.size });
},
handleSizeChange(val) {
this.size = val;
this.current = 1;
this.$emit("currentPageClick", { nCurrent: this.current, nSize: val });
},
},
};
</script>
<style lang="scss" scoped>
$color1: #0e90fe;
$color2: rgba(243, 243, 243, 1);
$color3: #fff;
$color4: rgb(244, 244, 244);
$color5: rgba(220, 220, 220, 1);
$color6: #303133;
$radius: 4px;
$color-size: 14px;
.sp-pagination {
::v-deep .btn-prev,
::v-deep .btn-next {
border: 1px solid $color5 !important;
background: center center no-repeat $color4 !important;
padding-left: 0;
padding-right: 0;
padding: 0 8px;
border-radius: $radius;
font-size: $color-size;
}
::v-deep .btn-prev:hover,
::v-deep .btn-next:hover {
color: $color1;
}
::v-deep .el-pagination__total {
margin: 0 10px;
color: $color6;
font-size: $color-size;
}
::v-deep .el-pagination__jump {
margin: 0;
color: $color6;
font-size: $color-size;
}
::v-deep .el-pager {
.number {
border: 1px solid $color5;
border-radius: $radius;
margin: 0 5px;
}
.number:hover {
border: 1px solid $color5;
color: $color1;
}
.active {
background-color: $color1;
border: 1px solid $color5;
color: $color3;
pointer-events: none;
}
}
}
</style>
2.table的封装(这里注意table引入了分页的代码)
<template>
<div>
<el-table
ref="elTable"
@cell-dblclick="rowDoubleClick"
@row-click="rowClick"
@selection-change="$emit('selection-change', $event)"
class="base-table full-width"
v-loading="paginationOptions.loading || tableLoading"
:data="tableListCopy"
:size="size"
:border="border"
:stripe="stripe"
:default-sort="defaultSort"
:height="height"
:show-summary="showSummary"
:tree-props="treeProps"
row-key="id"
highlight-current-row
>
<el-table-column
v-if="selection"
width="50"
type="selection"
></el-table-column>
<el-table-column
v-if="order"
align="center"
label="序号"
:fixed="
paginationOptions.hasOwnProperty('orderFixed')
? paginationOptions.orderFixed
: false
"
width="60"
type="index"
:index="indexMethod"
></el-table-column>
<template v-for="(item, index) in columns">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
:fixed="item.hasOwnProperty('fixed') ? item.fixed : false"
:sortable="item.sortable"
show-overflow-tooltip
v-if="item.hasOwnProperty('show') ? item.show : true"
>
<template slot-scope="{ row }">
<template v-if="item.clickEnable">
<el-button @click="$emit('click', row, item)" type="text">
{{ formatData(item, row) }}
</el-button>
</template>
<template v-else-if="item.render">
<expand-dom
:column="item"
:row="row"
:render="item.render"
></expand-dom>
</template>
<template v-else>
{{ formatData(item, row) }}
</template>
</template>
</el-table-column>
</template>
<slot></slot>
</el-table>
<el-row v-show="paginationOptions.total > 0" :gutter="20">
<el-col :span="21" class="pagination-col" :offset="3">
<EPagination
class="pagination"
:total="paginationOptions.total"
@currentPageClick="currentPageClickHandle"
ref="epagination"
/>
</el-col>
</el-row>
</div>
</template>
<script>
// import { format } from "date-fns";
import EPagination from "../EPagination/index";
/**
* 基础表格
*
* @prop {Array} data 表格数据,example:[{ [prop]: String }]
* @prop {Array} columns 表格栏目
* - example:[{
* prop: String, label: String, width: Number, sortable: Boolean,
* clickEnable: Boolean, type: String, dateFormat: String, formatter: Function
* }]
* - sortable 是否排序
* - clickEnable 是否可点击,会触发表格的 click 事件,详情见下面的 click 事件
* - type 数据类型,date 为时间戳 dic为字典
* - dateFormat 时间转换格式, 默认 'yyyy-MM-dd HH:mm:ss'
* - formatter(value) 格式化单元格数据,参数为当前单元格数据,需返回展示的内容
*
* @prop {Boolean} border 是否有边框,默认无
* @prop {Boolean} stripe 是否斑马条纹,默认有
* @prop {String} size 表格大小,默认 mini
* @prop {Boolean} order 是否有序号,默认无
* @prop {Object} defaultSort 默认排序,example:{ prop: 'area', order: 'descending' }
* @prop {String} height 表格高度
* @prop {Boolean} showSummary 是否展示总计行,默认 false
* @prop {Boolean} selection 是否展示复选框,默认 false
* @prop {Object} treeProps 树形菜单的 props 对应参数,默认 { children: 'children' }
*
* @event selection-change 复选框勾选事件
* @event click(data, column) 栏目点击事件,data 当前行的数据,column 当前栏目的数据
* @event row-click(row, column, cell, event 行点击事件
*
* @method setCurrentRow(row) 设置当前行
*/
export default {
props: {
datas: {
type: Array,
default: () => {
return [];
},
},
columns: Array,
border: {
type: Boolean,
default: false,
},
stripe: {
type: Boolean,
default: true,
},
size: {
type: String,
default: "small",
},
tableLoading: {
type: Boolean,
default: false,
},
defaultSort: Object,
height: {
type: String,
default: "auto",
},
showSummary: {
type: Boolean,
default: false,
},
order: {
type: Boolean,
default: true,
},
selection: {
type: Boolean,
default: false,
},
// showPagation: {
// type: Boolean,
// default: true,
// },
treeProps: {
type: Object,
default() {
return { children: "children" };
},
},
options: {
type: Object,
default() {
return {};
},
},
},
components: {
expandDom: {
functional: false,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null,
},
},
render: function (h) {
return this.render(h, this.row);
},
},
EPagination,
},
data() {
return {
optionsDefault: {
total: 0,
pageSize: 10,
current: 1,
loading: false,
},
tableListCopy: this.data,
};
},
created() {
// console.log(this.tableListCopy);
},
computed: {
paginationOptions: {
get: function () {
const temp = Object.assign({}, this.optionsDefault);
for (const index in this.options) {
temp[index] = this.options[index];
}
return temp;
},
set: function (obj) {
this.optionsDefault = Object.assign(this.optionsDefault, obj);
},
},
},
methods: {
// 单元格数据格式化
formatData(column, row) {
const value = row[column.prop];
if (value) {
if (column.type === "date") {
return format(value, column.dateFormat || "yyyy-MM-dd HH:mm:ss");
} else if (column.formatter instanceof Function) {
return column.formatter(value, row);
} else {
return value;
}
} else {
return value;
}
},
// 双击事件
rowDoubleClick(row, column, cell, event) {
this.$emit("cell-dblclick", row, column, cell, event);
},
// 表格行点击事件
rowClick(row, column, cell, event) {
this.$emit("row-click", row, column, cell, event);
},
// 设置当前行
setCurrentRow(row) {
this.$refs.elTable.setCurrentRow(row);
},
toggleSelection(row) {
this.$refs.elTable.toggleRowSelection(row);
},
// 清空勾选
clearSelection() {
this.$refs.elTable.clearSelection();
},
// 分页查询
currentPageClickHandle(val) {
this.paginationOptions.current = val.nCurrent;
this.paginationOptions.pageSize = val.nSize;
this.$emit("afterCurrentPageClick", val, function () {});
},
setPageInit() {
this.$refs.epagination.init();
},
// table数据赋值
setPageInfo(current, total, tableList) {
this.paginationOptions.current = current;
this.paginationOptions.total = total;
this.tableListCopy = tableList;
},
// 分页index++
indexMethod(index) {
return (
(this.paginationOptions.current - 1) * this.paginationOptions.pageSize +
index +
1
);
},
},
};
</script>
<style lang="scss" scoped>
.pagination-col {
margin-top: 20px;
margin-bottom: 20px;
.pagination {
text-align: center;
}
}
::v-deep .el-table {
border-top: 1px solid rgba(241, 241, 241, 1);
border-bottom: 1px solid rgba(241, 241, 241, 1);
th {
background-color: rgba(218, 222, 226) !important;
height: 53px !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: Microsoft YaHei !important;
color: #444444 !important;
}
.el-table__row--striped td {
background-color: rgba(245, 246, 247, 1) !important;
}
//用来设置当前页面element全局table,hover某行时的背景色
.el-table__body tr.hover-row > td {
background-color: #e7f3ff !important;
// color: white;
color: rgba(61, 145, 246, 1);
}
// 用来设置当前页面element全局table 选中某行时的背景色
.el-table__body tr.current-row > td {
background-color: #e7f3ff !important;
color: rgba(61, 145, 246, 1);
}
}
</style>
3.现在就要在你想要表格的页面引入这个封装好的table了
<template>
<div>
<Basetables
ref="zzllks"
:height="'574px'"
:order="true"
:tableLoading="tableLoading"
:columns="jlhbColumns"
@selection-change="selsChange"
@afterCurrentPageClick="afterCurrentPageClickHandle"
>
<el-table-column
label="订单状态"
prop="result"
align="center"
width="80px"
>
<template slot-scope="scope">
{{ transition[scope.row.orderStatus] }}</template
>
</el-table-column>
<el-table-column
label="操作"
prop="result"
fixed="right"
align="center"
width="100px"
>
<template slot-scope="{ row }">
<el-button
size="small"
type="danger"
v-show="row.orderStatus == 2"
v-hasPermi="['order:store:orderRefund']"
@click="whereaboutsoftheorder(row)"
>退单</el-button
>
<el-button
type="info"
size="small"
disabled
style="margin-left: 0"
v-hasPermi="['order:store:orderRefund']"
v-show="row.orderStatus !== 2"
@click="orders(row)"
>退单</el-button
>
</template>
</el-table-column>
</Basetables>
</div>
</template>
// 注意上面的订单状态是后端给我们数字我们要转文字的
<script>
import Basetables from "../../components/base-tables";
export default{
components: {
Basetables
},
data(){
return {
tableLoading:false, // 表格loading
jlhbColumns: [
{
prop: "orderNum",
label: "订单号",
align: "center",
width: "180px",
},
{
prop: "orderMoney",
label: "订单金额",
align: "center",
},
{
prop: "createTime",
label: "下单时间",
align: "center",
width: "180px",
},
{
prop: "realName",
label: "下单人",
align: "center",
},
{
prop: "orderDesc",
label: "套餐名称",
align: "center",
width: "150px",
},
{
prop: "serviceShopName",
label: "服务门店名称",
align: "center",
},
{
prop: "nature",
label: "门店性质",
align: "center",
render: (h, row) => {
const { nature } = row;
let text = "";
switch (nature) {
case 1:
text = "直营";
break;
case 2:
text = "加盟";
break;
}
return h("span", text);
},
// 这里是后端给我们数字我们转文字
],
}
}
created() {
this.getList(); // 表格数据请求
},
methods:{
getList() {
this.tableLoading = true; // 打开表格loading
listmatters(this.queryParams) // 表格接口请求
.then((res) => {
if (res.code == 200) {
let current = this.queryParams.pageNum;
let total = res.total;
let data = res.rows;
this.$refs.zzllks.setPageInfo(current, total, data); //请求到的的data数据和总数分页等传入上面封装的表格table里面
}
})
.finally(() => {
this.tableLoading = false; // 这里关闭loading
});
},
// 分页查询
afterCurrentPageClickHandle(val) {
this.elseParams.pageNum = val.nCurrent;
this.elseParams.pageSize = val.nSize;
this.getList();
},
// 这里删除第二页最后一条他不会跳到第一页,懂得都懂,我都替你们想好了
// 删除
delete(){
这里接口调用我就不写了成功之后调用以下方法就可以了
const totalPage = Math.ceil(
(this.totalSensitive - 1) / this.queryParams.pageSize
);
this.queryParams.pageNum =
this.queryParams.pageNum > totalPage
? totalPage
: this.queryParams.pageNum;
this.queryParams.pageNum =
this.queryParams.pageNum < 1 ? 1 : this.queryParams.pageNum;
this.listNoapprovaln(); // 重新刷新页面
}
// 批量审批
selsChange(sels) {
this.sels = sels;
this.selsId = [];
this.sels.map((item) => {
this.selsId.push(item.id);
});
},
}
}
</script>
4.以上table(表格) +分页,想要element-ui表单查询的封装点击我主页查看是配合这个table表格的