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=" 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;
    }

 页面显示:

原文地址:https://www.cnblogs.com/shushengyou/p/9177650.html