element表格和后台联调

最新推荐文章于 2024-05-16 03:07:03 发布

原创最新推荐文章于 2024-05-16 03:07:03 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui

vue2+element+echarts后台管理实战专栏收录该内容

11 篇文章

订阅专栏

本文详细描述了如何在Vue项目中配置接口（如/api/goods/xxx），使用axios进行GET请求，并将数据动态展示在表格中，包括异步请求和数据绑定的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.配置接口

projectList:'/api/goods/xxx',//产品列表

2.请求接口(get请求+默认参数page)

// 产品列表 page
    projectList(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>

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