vue element-ui获取后台对应数据显示在表格上

最新推荐文章于 2026-04-27 07:53:32 发布

原创最新推荐文章于 2026-04-27 07:53:32 发布 · 1.7w 阅读

28 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js结合封装好的$http方法进行后台数据请求，包括GET请求参数设置，以及如何将获取的数据展示在Element UI的表格中。通过具体代码示例，展示了如何处理后台返回的不同JSON格式，并在表格中正确显示数据。

参考：https://blog.csdn.net/weixin_36706903/article/details/81706857
我后台的数据格式是这样的在这里插入图片描述
我在我的方法中是这样写的（$http.是封装好的ajax,可能每个人的命名习惯不一样）

this.$http({
          url: this.$http.adornUrl('后台返回连接地址'),
          method: 'get',
          params: this.$http.adornParams({
            'keyword': '男',      
            'page': 1,
            'limit': 10
          })
        }).then(({data}) => {
          this.tableData = data.page.list    // 注意这里，后台返回的json格式不一样写的就不一样
          console.log(JSON.stringify(data))
        }).catch(function (error) {
          console.log(error)
        })

在element表格中就也要有对应的修改（向右拉动滚动条，我有备注）

 <el-table     。。此处省略参考原博主。。  :data="tableData" >
        <el-table-column label="序号" prop="id" type="index" sortable="custom" align="center" width="80px" ></el-table-column>                // id就直接这样写了
        <el-table-column label="学校" width="130px" align="center" prop="school_name"> </el-table-column>        //school_name在list中，上边的方法已经写了 this.tableData = data.page.list ，直接写就可以
        <el-table-column label="姓名" width="130px" align="center" prop="list">    //这是第二种多此一举了，先prop一下list,在scope.row.xm也可以
          <template slot-scope="scope">
            <span>{{scope.row.xm}}</span>
          </template>
        </el-table-column>

再有注意一点

data(){
	return{
	   tableData: []   //这里是中括号，别瞎写
	}
}