vue怎么实现后台数据渲染到页面

Raven丶 2019-01-31 03:41:45
<el-table ref="multipleTable" :data="TableData" border stripe tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="examinId" label="考试" show-overflow-tooltip width="280"></el-table-column>
<el-table-column prop="orgId" label="学院" show-overflow-tooltip width="190"></el-table-column>
<el-table-column prop="speId" label="专业" show-overflow-tooltip></el-table-column>
<el-table-column prop="classId" label="班级" show-overflow-tooltip width="110"></el-table-column>
<el-table-column prop="courseId" label="专业科目" show-overflow-tooltip width="150"></el-table-column>
<el-table-column prop="status" label="状态" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" show-overflow-tooltip width="130"></el-table-column>
</el-table>
---------分割线---------
上面这是后台写好的接口
---------分割线---------
import examsubject from "@/service/auth/ExaminationManagement/examinationSubject";
import moment from 'moment';
--------分割线----------
这是导入后台的路由
--------分割线----------
// 输出已选择的table数据
handleSelectionChange(val) {
this.multipleSelection = val;
},
//展示当前显示条数
handleSizeChange(val) {
this.size = val;
examsubject.findAll({size:this.size},(data) => {
this.TableData = data.data;
})
},
//展示当前显示的页数
handleCurrentChange(val) {
this.page = val;
examsubject.findAll({size:this.size,page:this.page},(data) => {
this.TableData = data.data;
this.total = data.total;
})
},
//模态框没有做任何操作就关闭时刷新table
handleClose(){
this.handleCurrentChange();
this.dialogVisible = false;
},
loadData(){
examsubject.findAll((data) => {
console.log(data)
this.TableData = data.data;
this.total = data.total;
})
},
----------分割线-----------
这是实行find All方法
-----------分割线----------
但是后台的数量已经娶到了,唯独没有显示数据记录,就几个数据的表格,怎么才可以将后台的数据渲染进来?
...全文
4385 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
「已注销」 2019-03-11
  • 打赏
  • 举报
回复
引用 3 楼 Raven丶 的回复:
[quote=引用 1 楼 it_wang001 的回复:] 你得将后台返回的每条数据与前台的prop名对应起来,具体的可以看一下element-ui官网上el-table的数据绑定http://element-cn.eleme.io/#/zh-CN/component/table
表格显示空白的,条数是对的,是不是需要数据怎么转换一下?[/quote] 你把后台接口的数据截图发出来看看
Raven丶 2019-03-11
  • 打赏
  • 举报
回复
引用 4 楼 it_wang001 的回复:
[quote=引用 3 楼 Raven丶 的回复:]
[quote=引用 1 楼 it_wang001 的回复:]
你得将后台返回的每条数据与前台的prop名对应起来,具体的可以看一下element-ui官网上el-table的数据绑定http://element-cn.eleme.io/#/zh-CN/component/table

表格显示空白的,条数是对的,是不是需要数据怎么转换一下?[/quote]
你把后台接口的数据截图发出来看看[/quote]
看样子没用了,已经重新分配任务,前端不用我搞了,继续前端,谢谢
Raven丶 2019-02-14
  • 打赏
  • 举报
回复
引用 1 楼 it_wang001 的回复:
你得将后台返回的每条数据与前台的prop名对应起来,具体的可以看一下element-ui官网上el-table的数据绑定http://element-cn.eleme.io/#/zh-CN/component/table

表格显示空白的,条数是对的,是不是需要数据怎么转换一下?
Raven丶 2019-02-01
  • 打赏
  • 举报
回复
架构师说<el-table>和<el-table-column>放在一起就没有意义了,现在重构页面将<el-checkbox>用上,但是还是怎么从后台取到数据并显示在页面,因为到时候要选中提交到后台,这个东西很麻烦啊,刚入手几周就给这么个棘手的模块。
「已注销」 2019-02-01
  • 打赏
  • 举报
回复
你得将后台返回的每条数据与前台的prop名对应起来,具体的可以看一下element-ui官网上el-table的数据绑定http://element-cn.eleme.io/#/zh-CN/component/table

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧