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

参考: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: []   //这里是中括号,别瞎写
	}
}
发布了38 篇原创文章 · 获赞 1 · 访问量 5169

猜你喜欢

转载自blog.csdn.net/ShangMY97/article/details/103162168
今日推荐