vue element-ui获取后台对应数据显示在表格上
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
参考: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: [] //这里是中括号,别瞎写
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)