1.概述
写完后端的接口,前端发送请求给后端获取数据
2.效果展示
3.思路
给一个函数用于发送请求获取数据,给到一个列表中,在创建这个页面时调用此函数。再把列表绑定到表格中展示即可
4.完整代码展示
<!-- src/components/goods/Goods.vue -->
<template>
<div>
<!-- 面包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<!-- 具体内容显示 -->
<el-card>
<!-- 内容1 -->
<el-row>
<!-- 搜索框 -->
<el-col :span="8">
<el-input>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<!-- 添加商品按钮 -->
<el-col :span="4">
<el-button type="primary" icon="el-icon-plus">添加商品</el-button>
</el-col>
</el-row>
<!-- 内容2:具体内容显示 -->
<!-- data可以用来绑定数据,prop会对应数据的列表具体值显示 -->
<el-table :data="goodsList" border>
<el-table-column type="index"></el-table-column>
<el-table-column label="商品名称" prop="name"></el-table-column>
<el-table-column label="商品价格(元)" prop="price" width="120px"></el-table-column>
<el-table-column label="商品库存" prop="number" width="80px"></el-table-column>
<el-table-column label="操作" width="200px">
<!-- 创建查槽获取当前列的值 -->
<template slot-scope="scope">
<el-button size="mini" type="success" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
goodsList: [],
qname: ''
}
},
created() {
this.getGoodsList()
},
methods: {
async getGoodsList() {
const { data: resp } = await this.$axios.get('/api/goods_list',{
params: { name: this.qname }
})
if ( resp.status !== 200 ) return this.$msg.error(resp.msg)
this.$msg.success(resp.msg)
this.goodsList = resp.data
}
}
}
</script>
<style lang="less" scoped>
.el-col{
margin: 5px;
}
</style>