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. 用Java写一个生产者-消费者队列

    生产者消费者的模型作用 通过平衡生产者的生产能力和消费者的消费能力来提升整个系统的运行效率,这是生产者消费者模型最重要的作用. 解耦,这是生产者消费者模型附带的作用,解耦意味着生产者和消费者之间的联系 ...

  2. form表单传输多余参数

    1.使用post提交表单,同时在form的action属性后添加“?参数=参数值”,经验证,可行,但是在浏览器中看不到该参数在form参数中,如下图: 上图未出现courseId属性,form代码如下 ...

  3. [Algorithm] 4. Ugly Number II

    Description Ugly number is a number that only havefactors 2, 3 and 5. Design an algorithm to find th ...

  4. FileReader实现读取文件内容并输出到屏幕上

    FileReader与FileInputStream都是从文件读数据,而前者一次读一个字符,后者一次读一个字节(在Unicode编码环境下1个字符=2个字节) package com.janson.d ...

  5. python爬虫29 | 使用scrapy爬取糗事百科的例子，告诉你它有多厉害！

    是时候给你说说 爬虫框架了 使用框架来爬取数据 会节省我们更多时间 很快就能抓取到我们想要抓取的内容 框架集合了许多操作 比如请求,数据解析,存储等等 都可以由框架完成 有些小伙伴就要问了 你他妈的 ...

  6. java 中序列化（Serializable）

    18年5月份,在毕业快一年的时候,我终于把自己从研发助理偏向行政打杂,偶尔写一些前端代码的处境,回归到了初衷-安安静静写前后端代码的小小程序员~过程中的心酸也就不在这里吐啦,毕竟我是小太阳,永不熄灭的 ...

  7. Java基础学习总结（77）——Java枚举再总结

    在Java SE5之前,我们要使用枚举类型时,通常会使用static final 定义一组int常量来标识,代码如下 public static final int MAN = 0; public s ...

  8. java中String,int,Integer,char、double类型转换

    java中String,int,Integer,char.double类型转换----https://www.cnblogs.com/kangyu222/p/5866025.html

  9. SGU - 321 - The Spy Network

    先上题目: 321. The Spy Network Time limit per test: 0.5 second(s)Memory limit: 65536 kilobytes input: st ...

  10. codevs1213 解的个数

    题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c = 0 p<=x<=q r<=y<=s 求满足这些条件的x,y的个数. 输入描述 Input ...