最近小熙在整理以前的代码,碰到了写的element-ui整合vue的项目感觉挺好用的,就用一个案例分享给大家吧。
首先还是直接附上一份单独网页版的代码吧,复制导入vue.js即用,不需要后端,感受下element-ui的强大。
如果想要直接的案例,不想进行简单尝试,请直接调到标题二:案例环境
1. 单独网页版
-
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--这里是vue的js,只有这个需要自己导入自己的--> <script src="../js/vue-2.5.17.js"></script> <!--饿了么团队对于Vue封装的插件,这里体现的是分页--> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <!--简单实用分页组件,具体和后端整合使用还需配置数据交互--> <!--具体数据整合使用请看,前后端分离项目goods--> <div id="page"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <script type="text/javascript"> var data = { total: 400, pageSize: 100, currentPage: 1 }; var vue = new Vue({ el: "#page", data: data, methods: { handleSizeChange(value){ this.pageSize = value; }, handleCurrentChange(value){ this.currentPage = value; } } }); </script> </body> </html>
-
效果:
这里展示的是element-ui效果图,如果想要更全可以去官网查询其他的。
2. 案例环境
小熙的前端案例环境是:win10、webstorm、vue.js(2.5.17)可以试试其他的
3.前端
- 代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.5.17.js"></script> <script src="../js/axios-v0.18.0.js"></script> <!-- 引入网页版样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入网页版组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="goods"> <!--表格的结构--> <table border="1px"> <tr> <th>编号</th> <th>名称</th> <th>图片</th> <th>价格</th> </tr> <!--从后台获取的数据,填入表格--> <tr v-for="(good,index) in goods"> <td>{{good.id}}</td> <td>{{good.name}}</td> <td><img :src="good.image" width="100px" height="100px"></td> <td>{{good.price}}</td> </tr> </table> <!--饿了吗团队开发的分页组件--> <!--background,是显示背景色的组件--> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <script type="text/javascript"> var data = { // 商品数组 goods: [], //一共从后台获取的条数,默认设置为10 total: 10, //当前页码,默认设置为1 currentPage: 1, // 每页展示的条数,默认设置为3,组件中的page-sizes属性数组中可以添加选择展示条目数 pageSize: 3 }; var vue = new Vue({ el: "#goods", data: data, methods: { //初始化页面 initGoods(){ // 访问后端程序获取数据 axios.get("http://localhost:8091/goods/"+this.currentPage+"/"+this.pageSize).then(response => { this.goods = response.data.data; this.total = response.data.total; }) }, handleSizeChange(value){ //将页面选择的每页展示条目数赋值给pageSize this.pageSize = value; //调用初始化方法,根据赋值的每页展示条目数再次去后台查询 this.initGoods(); }, handleCurrentChange(value){ //将页面选择的跳转页码赋值给currentPage this.currentPage = value; //调用初始化方法,根据赋值的跳转页码再次去后台查询 this.initGoods(); } }, created(){ //在vue生命周期的创建之后阶段,调用初始化方法,获取后台的数据并赋值给对应自定义属性 this.initGoods(); } }); </script> </body> </html>
- 效果:
- 效果:
简单案例的element-ui整合vue的效果图就是这样了,如果有什么问题请点击小熙的头像,获取联系方式和我联系哟。