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. django在验证登录页面时遇到的数据查询问题

    数据库查询时针对不存在的用户名进行验证 django在查询数据库时,可以使用get和filter两种方法. 两者的区别 当数据库内不存在该数据时,get会返回异常,而filter会返回空. 当数据库内 ...

  2. 微信支付开发 c#

    代码demo下载地址: https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=11_1

  3. C#读取文件-古文观止（总结一下）

    1,读取单个文件 //读取一个文本文件 private void buttonRead_Click(object sender, EventArgs e) { String path = Enviro ...

  4. form表单传输多余参数

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

  5. css--小白入门篇6（终）

    一.相对定位 定位有三种,分别是相对定位.绝对定位.固定定位. 相对定位: 1 position:relative; 绝对定位: 1 position:absolute; 固定定位: 1 positi ...

  6. Luogu P1991 无线通讯网

    P1991 无线通讯网 题目描述 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫 ...

  7. ZOJ - 3981 - Balloon Robot （思维）

    参考自:https://blog.csdn.net/qq_36553623/article/details/78445558 题意: 第一行三个数字n, m, q表示有m个座位围成一个环,n个队伍,q ...

  8. 魂酥的LNOI2019滚粗记

    $Day -???$ 高一下终于开始了 在开学文化课考试的水题之下混了个(成绩)前排 于是我便油然而生一种自信 我!要!进!省!队! 讲句真话我这么想的时候连自己都觉得自己是个十足的沙雕 我又不是zw ...

  9. [luogu3067 USACO12OPEN] 平衡的奶牛群

    传送门 Solution 折半搜索模板题 考虑枚举每个点在左集合和右集合或者不在集合中,然后排序合并即可 Code //By Menteur_Hxy #include <cmath> #i ...

  10. 将node-webkit打包后文件用nsis再打包成安装包