vue+element-ui中获取页面数据
2018-08-15 16:47
435 查看
页面展示:
数据库字段名:
跨域:
config里的index文件里的dev里面的proxyTable里面添加自己的后台端口,这样就能很方便的请求后台数据了
'/api':{
target:'http://localhost:9987',
changeOrigin:true,
pathRewrite:{
'/api':''
}
[code]<template> <el-table :data="packData" border style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="PackingId" label="包装编号" width="120">//prop里的值是数据库表里的对应字段名 </el-table-column> <el-table-column prop="PackingName" label="包装名称" width="120"> </el-table-column> <el-table-column prop="PackingPrice" label="包装价格" width="120"> </el-table-column> <el-table-column prop="PackingImage" label="包装图片"> </el-table-column> </el-table> </template> </script> export default { name: 'pack', data() { return { packData:[],//主题数据 }} methods:{ // 获取 包装数据,因为搜索后分页数据会变化,所以这里可以传值到后台判断是否进行了搜索展示,这里只做简单展示,不考虑搜索和分页 getPackData() { //我用的api代理 this.$axios.post('/api/selectPackPageMade.do').then((res) => { this.packData = res.data;//把传回来数据赋给packData }).catch(function(error){ console.log(error); }) },} } </script>
阅读更多
相关文章推荐
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- 【前后不分离之】vue+elementui+webpack+springboot 单页面 应用
- 表格中的数据删除。vue+element-ui
- spring boot + vue + element-ui全栈开发入门——主页面开发
- vue2.0 + element UI 中 el-table 数据导出Excel的方法
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- vue全家桶+element-UI搭建后台管理系统(3)“:使用element-ui搭建基本后台页面”
- spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之三 vue简单页面实战
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- 浅谈Vue(使用vue+element ui搭建页面)
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- 基于VUE+Element UI的子页面和父页面交互示例
- Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制
- vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。
- 用vue如何获取数据渲染页面表格