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: []   //这里是中括号,别瞎写
	}
}
  • 10
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 Element UI 的 Pagination 组件结合 Vue 来实现表格的分页功能。对于后台一次返回所有数据的情况,前端可以根据当前页码和每页显示的条数来进行数据的分页处理。 首先,在 Vue 的模板中,你需要使用 Pagination 组件来展示分页信息,并绑定相应的属性和事件。 ```html <template> <div> <el-table :data="tableData.slice(startIndex, endIndex)"> <!-- 表格列定义 --> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="sizes,prev,pager,next,total" :total="tableData.length"> </el-pagination> </div> </template> ``` 然后,在 Vue 的 script 部分,你需要定义相关属性和事件处理函数。 ```javascript <script> export default { data() { return { tableData: [], // 所有数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页显示的条数 }; }, computed: { startIndex() { return (this.currentPage - 1) * this.pageSize; }, endIndex() { return this.currentPage * this.pageSize; }, }, methods: { handleSizeChange(val) { this.pageSize = val; this.currentPage = 1; // 切换每页显示条数后,重置当前页码为第一页 }, handleCurrentChange(val) { this.currentPage = val; }, }, }; </script> ``` 这样,当用户切换每页显示的条数或者点击页码时,Vue 会根据当前页码和每页显示的条数来计算需要展示的数据范围,并更新表格的内容。注意,`tableData.slice(startIndex, endIndex)` 可以根据当前页码进行切片操作,只显示对应页码的数据。 请确保在获取到所有数据后,将数据赋值给 `tableData` 属性。你可以通过后台接口获取所有数据,然后在前端进行分页处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值