转自 https://www.cnblogs.com/shushengyou/p/9177650.html
element-ui table 页面加载时,动态渲染后台传过来的数据(springmvc)
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;
}
页面显示: