学习Vue快一个星期了,因为以往习惯了用JQuery去操作DOM对象的方式,一开始理解起来有些许吃力,看了快一个星期文档和各路大神的博客讲解后思路开始慢慢清晰起来,所以决定自己写一个demo,通过实战发现自己知识盲区,一点一点完善自己的demo,并且每隔一段时间记录一下自己的学习成果,做阶段性的总结
首先-环境搭建
环境搭建这里推荐一篇文章,讲解的非常详细
https://segmentfault.com/a/1190000013950461?utm_source=tag-newest
demo采用的技术栈为 vue-cli3.0 + element 后端技术栈为 springboot + mybatis
话不多说 上图
首先是最基础的数据表格
<el-table :data="tableData" style="width:100%" border > <!-- 这个是序号 --> <el-table-column type="index" width="50"></el-table-column> <el-table-column prop="sid" width="180" label="sid"></el-table-column> <el-table-column prop="catalogName" width="180" label="catalogName"></el-table-column> <el-table-column prop="catalogCode" width="180" label="catalogCode"></el-table-column> <el-table-column> <el-button type="primary" round>查看</el-button> <el-button type="danger" round>删除</el-button> </el-table-column> </el-table>
js
export default { name:'commodityTable', data(){ return{ tableData:[], } }, methods:{ find:function(){ this.axios.post('/api/catalog/find', ).then(res=>{ this.tableData = res.data }) }, mounted(){ this.find() } }
这里特别提醒一下钩子函数mounted (mounted在整个实例中只执行一次,而且是在页面挂载完成之后执行,一般做初始化用)
接下来是分页
首先先来看下官方文档的参数说明
修改原先el-table中的data属性(关键)
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
在table下方添加分页工具栏
<!-- 分页工具栏 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,40]" :page-size="pagesize" layout="total,sizes,prev,pager,next,jumper" :total="tableData.length" > </el-pagination>
js methods 中新添加两个方法
handleSizeChange:function(size){ //一页显示多少条 this.pagesize = size; }, handleCurrentChange:function(currentPage){ //页码更改方法 this.currentPage = currentPage; }
data中添加两个变量
currentPage:1, //默认页码为1 pagesize:10, //默认一页显示10条
接下来是查询
添加表头
<el-row> <el-form :inline="true" :model="catalogCommodity"> <el-form-item label="分类名"> <el-input v-model="catalogCommodity.catalogName" placeholder="分类名"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="find()">查询</el-button> </el-form-item> </el-form> </el-row>
s 这里我采用的方法是传一个对象到后台接口的方式
data中添加catalogCommo
catalogCommodity:{ catalogName:'' }
安装qs
npm install qs --save-dev
在该页面中引入qs
为什么要引入qs 因为如果传对象的话 使用 axios 的是Request Payload请求,而 ajax的是Form Data请求,需要通过qs将其转换 具体解析 https://www.cnblogs.com/xuzhudong/p/8487119.html
改写find方法
find:function(){ //qs转换 let postData = qs.stringify(this.catalogCommodity) this.axios.post('/api/catalog/find', postData ).then(res=>{ this.tableData = res.data console.log(res); }) }
版权声明:本文为CSDN博主「倔强的啊强」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_39327044/article/details/89440927