极客观点
项目管理
HarmonyOS
<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都走了
使用this. querytable()