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. 19MVC设计模式

    MVC设计模式 MVC英文即Model-View-Controller, 即把一个应用的输入.处理.输出流程按照Model.View.Controller的方式进行分离,这样一个应用被分成三个层——模 ...

  2. jquery 实现点评标签 类似淘宝大众点评的 快速准时 货品完好等

    111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  3. PS切图基本操作

    PS切图基本操作 2016-05-11 20:56:46|  分类: PhotoShop|字号 订阅     下载LOFTER我的照片书  |     1首先在“文件”中打开一张图片.   2点击“移 ...

  4. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  5. ZOJ - 3987 - Numbers （大数 + 贪心）

    参考自:https://blog.csdn.net/u013534123/article/details/78484494 题意: 给出两个数字n,m,把n分成m份,使得以下最小 思路: 或运算只有0 ...

  6. layui 动态表格之合并单元格

    需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...

  7. on绑定事件支持的事件类型

    blurfocusfocusinfocusoutloadresizescrollunloadclickdblclickmousedownmouseupmousemovemouseovermouseou ...

  8. 洛谷 1472 奶牛家谱 Cow Pedigrees

    [题解] DP题,我们用f[i][j]表示有n个节点.高度小于等于j的二叉树的个数.f[i][j]=sigma(f[t][j-1]*f[i-t-1][j-1]) t是1~i-1范围内的奇数. #inc ...

  9. [spoj1182][Sorted Bit Sequence] (数位dp)

    Description Let's consider the 32 bit representation of all integers i from m up to n inclusive (m ≤ ...

  10. Maven_自动化构建和构建环节

    [构建过程的几个主要环节] ①清理:删除以前的编译结果,为重新编译做好准备. ②编译:将 Java 源程序编译为字节码文件. ③测试:针对项目中的关键点进行测试,确保项目在迭代开发过程中关键点的正确性 ...