账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 加载问题
    22
    0
    <html xmlns:th="http://www.thymeleaf.org">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <div th:include="/common/common::common"></div>
    <head>
    <meta content="text/html;charset=UTF-8" />
    <link rel="stylesheet" th:href="@{/css/common/animate.min.css}">
    <link rel="stylesheet" th:href="@{/css/common/nprogress.css}">
    <link rel="stylesheet" th:href="@{/css/common/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/common/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/common/custom.min.css}">
    <script th:src="@{/js/login.js}"></script>
    </head>
    <body class="nav-md">
        <div class="container body">
            <div class="main_container">
                <div class="col-md-3 left_col">
                    <div class="left_col scroll-view">
                        <div th:include="/common/left::left"></div>
                    </div>
                </div>
                <div th:include="/common/header::header"></div>
                <div class="right_col" role="main" style="min-height: 100%;"><br>
                
                <div>
                  <i-table :columns="columns1" :data="historyData"></i-table>
                  <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" show-sizer></Page>
                </div>
                </div>
            </div>
        </div>
    </body>
    </head>
    <script>
    var vue =  new Vue({
        el: '#app',
        data (){
            return {
            //在脚本中,我们在表格中定义的数据和表头都需要在这里进行绑定,下面是一些假数据,其中Columns1中的title表示列明,key表示K-V中的标识
                columns1: [
                    {
                        title: '用户名',
                        key: 'username'
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime'
                    }
                ],
                //接下来绑定数据,分别对应前面的列的key值来进行数据绑定
                historyData: [],
                // 初始化信息总条数
                dataCount:0,
                // 每页显示多少条
                pageSize:10
            };
        },
        methods: {
            querytable : function(){
              axios.get("/user/getUsers")//post也可以改成get,但需要对应服务端的请求方法
                  .then(function (response) {
                      // 保存取到的所有数据
                      this.dataCount = response.list.length;
                      // 初始化显示,小于每页显示条数,全显,大于每页显示条数,取前每页条数显示
                      if(response.list.length < this.pageSize){
                          this.historyData = response.list;
                      }else{
                          this.historyData = response.list.slice(0,this.pageSize);
                      }
                  })
                  .catch(function (error) {
                    alert(error);
                  });
          },
          changepage(index){
              var _start = ( index - 1 ) * this.pageSize;
              var _end = index * this.pageSize;
              this.historyData = response.data.slice(_start,_end);
          },
          //当页面加载的时候执行
             created () {
                querytable();
            }
         }
        });
    </script>
    </html>

    为什么没加载 methods呢?data都走了

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 黒色ン诱惑灬 普通会员 1楼

      Vue.js 加载问题通常与以下因素有关:

      1. 异步加载:Vue.js 支持异步加载,这可以提高应用程序的性能。当组件中的数据发生变化时,Vue.js 会自动重新加载该组件,而不是等待整个页面完全加载。

      2. 缓存:Vue.js 使用虚拟DOM 和 Vue Router 进行数据渲染。如果页面上的数据在渲染时被缓存,那么在下一次渲染时,Vue.js 可能会直接从缓存中获取数据,而不是重新加载页面。

      3. 图片加载:Vue.js 可以通过懒加载来优化图片加载。当图片加载不完全时,Vue.js 可以将它们保存在临时文件中,而不是直接加载整个图片。

      4. 服务器响应时间:如果服务器响应时间过长,Vue.js 可能会尝试重新加载页面,而不是等待服务器响应。这可能会导致页面加载速度变慢。

      5. 网络问题:如果网络连接不稳定,Vue.js 可能会尝试重新加载页面,而不是等待服务器响应。这可能会导致页面加载速度变慢。

      如果你在使用 Vue.js 时遇到加载问题,你可以尝试以下步骤:

      1. 检查你的网络连接。

      2. 检查你的服务器响应时间。

      3. 如果使用的是懒加载,尝试优化图片加载。

      4. 如果使用的是异步加载,尝试提高Vue.js的性能。

      5. 如果你使用的是Vue Router,尝试优化路由配置。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部