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. go new() 和 make() 的区别

    看起来二者没有什么区别,都在堆上分配内存,但是它们的行为不同,适用于不同的类型. new(T) 为每个新的类型T分配一片内存,初始化为 0 并且返回类型为*T的内存地址:这种方法 返回一个指向类型为 ...

  2. top命令的用法

    top命令的用法 2018年07月15日 09:50:04 zhuoya_ 阅读数:1858    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/z ...

  3. 解决移动端 footer fixd 定位被键盘顶起来的方案

    直接上代码: $(document).ready(function () { var u = navigator.userAgent; var isAndroid = u.indexOf('Andro ...

  4. UVA - 10603 Fill（BFS求最小值问题）

    题目: 给出三个杯子(没有刻度线)的容量,起初之后第三个杯子是满的,其他的两个杯子是空的,容量分别是a.b.c.问最少需要倒多少升水才能让某一个杯子中的水有d升?如果不能恰好做到d升,就让某一个杯子里 ...

  5. Linux查看用户列表

    cat /etc/passwd 可以查看所有用户的列表w 可以查看当前活跃的用户列表cat /etc/group 查看用户组 groups 查看当前登录用户的组内成员groups gliethttp ...

  6. npm 使用教程

    链接----------------------------------npm官网npm淘宝镜像 安装包----------------------------------npm install -g ...

  7. vim基础(一)

    今天看了下兄弟连的VIM讲解,又学了几个新命令,记录一下. 插入与删除 插入 首先还是插入,以前只知道i.今天发现原来还有a\A\i\I\o\O,下面具体说一下: 命令 含义 a 在光标后插入 A 在 ...

  8. centos7安装：license information(license not accepted)

    安装centos7的时候明明已经选择了默认的许可证信息,不知道哪里出错了,安装到最后,就会显示license information(license not accepted)的信息.解决方法如下: ...

  9. noip模拟赛 dwarf tower

    [问题描述]Vasya在玩一个叫做"Dwarf Tower"的游戏,这个游戏中有n个不同的物品,它们的编号为1到n.现在Vasya想得到编号为1的物品.获得一个物品有两种方式:1. ...

  10. 互联网DSP广告系统架构及关键技术解析

    互联网DSP广告系统架构及关键技术解析 宿逆 关注 1.9 2017.10.09 17:05* 字数 8206 阅读 10271评论 2喜欢 60 广告和网络游戏是互联网企业主要的盈利模式 广告是广告 ...