本文主要是介绍p16-18列表展示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vue.prototype.$axios = axios
这里的Vue.prototype
相当于全局变量设置了一个属性？
this.&axios,可以在任何位置使用？
Vue.prototype.$httpUrl=‘http://localhost:8090’
所以我们可以把url也设置为属性
loadGet(){this.$axios.get(this.$httpUrl+'/user/list').then(res=>res.data).then(res=>{console.log(res)})
全局设置还可以使用request.js
尝试把后台返回的数据显示到前段
利用表格组件，之前我们的数据是固定的，现在擦灰姑娘是吧数据替换成我们获取的数据
怎么获取数据？
利用跨域axios的方法库
发送请求-
.then
this.$axios.get(url).then(res=>res.data).then(res=>{
console.log(res)
this.tableData=res})
这个语句，先执行get，得到返回数据放到res（应该是这个方法自己设的参数就是res），然后（.then）执行赋值（钩子函数）
先进行{ console.log(res)
this.tableData=res}
就是控制台打印res,把res赋值给tabledata
然后再把这个？赋值给res?
<el-main><el-table :data="tableData"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="no" label="账号" width="60"></el-table-column></el-table></el-main>
<script>export default {data() {return {tableData: []}},methods:{loadGet(){this.$axios.get(this.$httpUrl+'/user/list').then(res=>res.data).then(res=>{console.log(res)this.tableData=res})},loadPost(){this.$axios.post(this.$httpUrl+'/user/listP',{name:'小'}).then(res=>res.data).then(res=>{console.log(res)this.tableData=res})}},beforeMount(){this.loadGet();}};
</script>
pageSize和pageNum到底是什么
pageNum 表示当前第几页，对应 limit 语句的 offset 参数。 pageSize 表示这条查询语句最大返回多少条数据，
所以如果pageNum太大会看不到数据，因为没有那么多页数据
<template><div><el-main><el-table :data="tableData":header-cell-style="{background:'#bbbbbb'}"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="no" label="账号" width="60"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="age" label="年龄" width="60"></el-table-column><el-table-column prop="sex" label="性别" width="60"><template slot-scope="scope"><el-tag :type="scope.row.sex === 1 ? 'primary' : 'success'"disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag></template></el-table-column><el-table-column prop="phone" label="电话" width="60"></el-table-column><el-table-column prop="roleId" label="角色号" width="120"><template slot-scope="scope"><el-tag :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '普通用户')}}</el-tag></template></el-table-column><el-table-column prop="isvalid" label="是否生效" width="60"></el-table-column><el-table-column prop="operate" label="操作" width="200"><el-button size="small" type="success">编辑</el-button><el-button size="small" type="danger">删除</el-button></el-table-column></el-table>
</el-main><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[2, 5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination>
</div>
</template><script>export default {data() {return {tableData: [],pageSize:2,//这如果比较小，而且page-sizes="[5, 10, 20]"中没有//，就会导致初始界面无法显示完整数据pageNum:1,total:2,}},methods:{loadGet(){this.$axios.get(this.$httpUrl+'/user/list').then(res=>res.data).then(res=>{console.log(res)this.tableData=res})},loadPost(){this.$axios.post(this.$httpUrl+'/user/listPageC1',{pageNum:this.pageNum,pageSize:this.pageSize}).then(res=>res.data).then(res=>{console.log(res)if(res.code==200){this.tableData=res.datathis.total=res.total//这里要去看看网页打印的res到底是什么东西//然后看怎么获取表格需要的数据//成功后设置已知的参数//this.tableData=res}else{alert('获取数据失败')}})},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageNum=1;this.pageSize=val;this.loadPost();},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum=val;this.loadPost();}},beforeMount(){//this.loadGet();this.loadPost();}};
</script>
这篇关于p16-18列表展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
