快站淘客中转页网店运营教学
1.配置接口
projectList:'/api/goods/xxx',//产品列表
2.请求接口(get请求+默认参数page)
// 产品列表 pageprojectList(params){return axios.get(base.projectList,{params})}
3.获取数据 +直接放到created里边去了 刷新页面就可以看到
async projectList(page){let res = await this.$api.projectList({page})console.log('产品列表数据',res.data);}},
created(){this.projectList()}
异步请求接口 + 数据显示
// 获取产品列表数据async projectList(page){let res = await this.$api.projectList({page})console.log('产品列表数据',res.data);this.tableData = res.data.data}},
注意:prop和后端返回的值要一致
<div class="content"><el-table :data="tableData" style="width: 100%" border header-cell-class-name='active-header' cell-class-name="table-center"><el-table-column type="selection" width="44"></el-table-column><el-table-column prop="id" label="商品编号" width="180"></el-table-column><el-table-column prop="title" label="商品名称" width="180"></el-table-column><el-table-column prop="price" label="商品价格"></el-table-column><el-table-column prop="category" label="商品类目" width="180"></el-table-column><el-table-column prop="create_time" label="添加时间" width="180"></el-table-column><el-table-column prop="sellPoint" label="商品卖点"></el-table-column><el-table-column prop="descs" label="商品描述"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary" icon="el-icon-edit">编辑</el-button><el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" icon="el-icon-delete">删除</el-button></template></el-table-column></el-table></div>
效果图