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

页面显示：

posted on 2018-06-13 14:31 书生游阅读(37245) 评论(2) 编辑收藏举报