当前位置：首页 > news >正文

element表格和后台联调

news 2025/7/19 7:07:54

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>

效果图
在这里插入图片描述