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;

    }

页面显示：

element-ui table 页面加载时，动态渲染后台传过来的数据（springmvc）的更多相关文章

  1. JSFF或JSF页面加载时触发JavaScript之方法

    现象一 最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成.当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题.但是当我们把生 ...

  2. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  3. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  4. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  5. ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

    代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...

  6. 页面加载时，页面中DIV随之滑动出来；去掉页面滚动条

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. jquery--blur()事件，在页面加载时自动获取焦点

    jquery--blur()事件会在页面加载时自动获取焦点,应将onblur写到html标签中 <div class="inputbox"> <input typ ...

  8. 使用 v-cloak 防止页面加载时出现 vue.js 的变量名

    知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...

  9. 页面加载时的div动画

    用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...

随机推荐

  1. 【转载】jxl的使用总结（java操作excel）

    jxl.jar是通过java操作excel表格的工具类库: 链接:https://pan.baidu.com/s/1AAT_eA_Q47zFeQohap6eQg 提取码:777b 1:通过模拟实现创建 ...

  2. python3连接mysql 稍微进阶 + 日期处理

    1.踩了个操作中文的坑,结果发现之前的文章中有强调了,在连接处加:charset="utf8" conn = pymysql.connect(host = '127.0.0.1', ...

  3. 51nod 1285 山峰和分段

    [题解] 枚举n的各个因数作为段长,O(n)判断每一段内是否有山峰即可. #include<cstdio> #include<cstring> #include<algo ...

  4. Unity对象的所有组件深拷贝与粘贴

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/51454847 作者:car ...

  5. ssh登录问题

    ssh username@ip 密码正确但是登陆ssh时permission denied 1.   启动sshd:/etc/init.d/ssh start 2.   在/etc/ssh/sshd_ ...

  6. 递归算法（java）

    最近在用EasyUI中的tree遍历节点的时候用到了递归算法,现总结如下: * 递归算法:在函数里调用自身,但必须确定递归出口,即结束条件,不然就是无限循环:  * 递归一般解决的问题:       ...

  7. one troubleshooting case about em access issue

    Today when trying to open my Oracle EM url, I can not open it. So I thought may be the network is ha ...

  8. 【CV知识学习】【转】beyond Bags of features for rec scenen categories。基于词袋模型改进的自然场景识别方法

    原博文地址:http://www.cnblogs.com/nobadfish/articles/5244637.html 原论文名叫Byeond bags of features:Spatial Py ...

  9. ssh连接失败

    参考:http://www.cnblogs.com/starof/p/4709805.html https://www.chenyudong.com/archives/ssh-using-privat ...

  10. 使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉载入很多其它

    一.概述 本篇博客介绍的是怎样使用SwipeRefreshLayout和RecyclerView实现高仿简书Android端的下拉刷新和上拉载入很多其它的效果. 依据效果图能够发现,本案例实现了例如以 ...