list.vue
2.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<div class="store-list container-fluid">
<div class="page-header mb-0 mt-0">
<h4>词条列表</h4>
<breadcrumb v-bind:items="[{text: '首页', link: '/'},{text: '词条列表', active: true}]"/>
</div>
<div class="panel panel-white">
<div class="panel-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>词条</th>
<th>拼音</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in dataList">
<td>{{item.word}}</td>
<td>{{item.wordSpell}}</td>
<td>{{item.createTime | formatDate}}</td>
<td>
<router-link :to="'/word/save/'+item.id"
class="btn btn-sm btn-danger">编辑</router-link>
<a class="btn btn-sm btn-success">删除</a>
</td>
</tr>
</tbody>
</table>
<pagination size="md"
:total-rows="pagination.totalRows"
:per-page="pagination.perPage"
v-model="currentPage"
>
</pagination>
</div> <!--panel-body end-->
</div><!--panel end-->
</div>
</template>
<script>
import pagination from "@/components/bootstrap/pagination"
import breadcrumb from "@/components/bootstrap/breadcrumb"
export default {
data() {
return {
dataList: [],
pagination: {
totalRows: 0,
perPage: 1
},
currentPage: 1,
}
},
components: {
pagination: pagination,
breadcrumb: breadcrumb
},
created: function () {
this.getDataList();
},
mounted: function () {
},
updated: function () {
},
destroyed: function () {
},
methods: {
getDataList: function () {
var self = this;
self.ajax({
url: api.word.list,
data: self.form,
success: function (res) {
self.dataList = res.data.list;
self.pagination.totalRows = res.data.totalRecord;
self.pagination.perPage = res.data.pageSize;
}
});
},
},
watch: {
currentPage: function (newData) {
var self = this;
if (self.$route.query.pageIndex != newData) {
self.form.pageIndex = newData;
self.getDataList();
}
}
}
}
</script>