element-ui table 页面加载时,动态渲染后台传过来的数据(springmvc)
2024-08-31 00:23:43
jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<head>
<base href="<%=basePath%>">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'sid', order: 'descending'}" <%--按sid倒序排列--%>
>
<el-table-column
prop="sid"
label="编号"
sortable
width="180">
</el-table-column>
<el-table-column
prop="sname"
label="姓名"
sortable
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
sortable
width="180">
</el-table-column>
</el-table>
</div> <script type=text/javascript src="/js/jquery.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type=text/javascript src="/js/jquery.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script> new Vue({
el:"#app",
data:{
//动态数据
tableData: [] //固定数据
// tableData: [{
// sid: '2016-05-02',
// sname: '王小虎',
// age: '上海市普陀区金沙江路 1518 弄'
// }, {
// sid: '2016-05-04',
// sname: '王小虎',
// age:'上海市普陀区金沙江路 1518 弄'
// }]
},
methods: { },
mounted: function () {
var _this = this //很重要!!
axios.get('/findall')
.then(function (res) {
console.log(res);
_this.tableData = res.data
})
.catch(function (error) {
console.log(error);
});
},
//不要用ajax,以下无效,返回结果res不同
// mounted:function () {
// var _this = this
// $.ajax({
// url: '/findall',
// type: 'get',
// dataType: 'json',
// success: function (res) {
// _this.tableData=res.data
// console.log(res.data)
// }
// })
// }
})
</script>
</body>
</html> <%--
Vue生命周期可以总共分为8个阶段: beforeCreate(创建前),
created(创建后),
beforeMount(载入前),
mounted(载入后),
beforeUpdate(更新前),
updated(更新后),
beforeDestroy(销毁前),
destroyed(销毁后)--%>
controller:
@RequestMapping(value="/findall",produces = "text/plain;charset=utf-8")
@ResponseBody
public String findall(){
List<Student> list = dao.queryForList();
log.info("list:"+list); Gson gson = new Gson();
String s = gson.toJson(list);
return s;
}
页面显示:
最新文章
- 深入浅出MFC[摘记]
- 云时代的分布式数据库:阿里分布式数据库服务DRDS
- IOS开发的目录结构
- 核心概念 &mdash;&mdash; 契约(Contracts)
- firefox os 该设备呼叫移动开发
- document.body与document.documentElement
- java中基本数据类型和C语言中基本数据类型转换
- 第十一条:谨慎的覆盖clone()方法
- Variable SQLLOGDIR not found
- .NET Core2.1获取自定义配置文件信息
- Ubuntu16.04彻底删除PHP7.2
- Bomb Game HDU - 3622(二分最小值最大化)
- man termios(FreeBSD 12.0)
- 虹软2.0免费离线人脸识别 Demo [C++]
- 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框
- 2.4 UML类图
- python 小练习 6
- Tomcat6的相关配置
- Module &#39;null&#39; not found异常解决办法
- djano-cbv模式