<template>
<div class="shopList">
<!-- 商品列表 -->
<el-breadcrumb separator-class="el-icon-arrow-right" class="right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>添加商品</el-breadcrumb-item>
</el-breadcrumb>
<div class="padding">
<el-card class="box-card">
<el-row :gutter="20">
<el-col :span="6">
<el-input placeholder="请输入内容" v-model="queryInfo.query">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" class="goAddPage">添加商品</el-button>
</el-col>
</el-row>
<el-table :data="goodsList" border="" stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="商品名称" prop="goods_name" width="600"></el-table-column>
<el-table-column label="商品价格(元)" prop="goods_price" width="110"></el-table-column>
<el-table-column label="商品重量" prop="goods_number" width="90"></el-table-column>
<el-table-column label="商品数量" prop="goods_weight" width="90"></el-table-column>
<el-table-column label="创建时间">
<template slot-scope="scope">{{scope.row.add_time | time }}</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="danger" icon="el-icon-delete"></el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 10, 15, 20]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="pagination"
></el-pagination>
</div>
</div>
</template>
<script>
import { getgoods } from "@/api/api.js";
import { log } from "util";
export default {
data() {
return {
queryInfo: {
query: "",
pagenum: 1,
pagesize: 10
},
goodsList: [],
// 商品总数
total: 0
};
0;
},
mounted() {
this.add();
},
filters: {
time(val) {
let date = new Date(val).toLocaleString();
return date;
}
},
methods: {
async add() {
let { data: res } = await getgoods(this.queryInfo);
console.log(res);
this.goodsList = res.goods;
this.total = res.total;
console.log(this.goodsList);
},
handleSizeChange(val) {
this.queryInfo.pagesize = val;
this.add();
},
// pagenumber改变
handleCurrentChange(val) {
this.queryInfo.pagenum = val;
this.add();
}
},
components: {}
};
</script>
<style lang='scss' scoped>
.shopList {
width: 100%;
height: 100%;
background: #eaedf1;
.padding {
background-color: #fff;
}
.right {
padding-top: 15px;
padding-left: 15px;
}
.box-card {
width: 98%;
height: 100%;
margin-left: 15px;
margin-top: 15px;
.goAddPage {
margin-left: -100px;
}
.el-table {
font-size: 4px;
margin-top: 15px;
}
}
.pagination {
margin-left: -600px;
}
}
</style>
element接口版分页
最新推荐文章于 2022-05-31 09:56:20 发布