element-ui table 頁面加載時，動態渲染后台傳過來的數據（springmvc）

本文轉載自查看原文 2018-06-13 14:31 23194 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;
    }

頁面顯示：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ECharts動態獲取后台傳過來的json數據進行多個折線圖的顯示，折線的數據由后台傳過來在layui中，新的頁面怎么獲取另一個頁面傳過來的數據,並可以對數據進行判斷，layui中的后台分頁（table）。動態獲取后台傳過來的值作為select選項 ECharts動態獲取后台傳過來的json數據進行多個折線圖的顯示，折線的數據由后台傳過來 element-ui table 多列數據動態排序（前后台交互） jsp頁面獲取后台傳過來的list集合的長度 Jsp頁面遍歷后台傳過來的List MVC使用ajax異步刷新時怎樣輸出從后台中傳過來的JSON數據 js獲取頁面傳過來的參數 JS獲取頁面傳過來的值