table.vue
2.95 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<view>
<view class="uni-container">
<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
<uni-th width="150" align="center">日期</uni-th>
<uni-th width="150" align="center">姓名</uni-th>
<uni-th align="center">地址</uni-th>
<uni-th width="204" align="center">设置</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td>{{ item.date }}</uni-td>
<uni-td>
<view class="name">{{ item.name }}</view>
</uni-td>
<uni-td align="center">{{ item.address }}</uni-td>
<uni-td>
<view class="uni-group">
<button class="uni-button" size="mini" type="primary">修改</button>
<button class="uni-button" size="mini" type="warn">删除</button>
</view>
</uni-td>
</uni-tr>
</uni-table>
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
</view>
</view>
</template>
<script>
import tableData from './tableData.js'
export default {
data() {
return {
searchVal: '',
tableData: [],
// 每页数据量
pageSize: 10,
// 当前页
pageCurrent: 1,
// 数据总量
total: 0,
loading: false
}
},
onLoad() {
this.selectedIndexs = []
this.getData(1)
},
methods: {
// 多选处理
selectedItems() {
return this.selectedIndexs.map(i => this.tableData[i])
},
// 多选
selectionChange(e) {
console.log(e.detail.index)
this.selectedIndexs = e.detail.index
},
//批量删除
delTable() {
console.log(this.selectedItems())
},
// 分页触发
change(e) {
this.$refs.table.clearSelection()
this.selectedIndexs.length = 0
this.getData(e.current)
},
// 搜索
search() {
this.getData(1, this.searchVal)
},
// 获取数据
getData(pageCurrent, value = '') {
this.loading = true
this.pageCurrent = pageCurrent
this.request({
pageSize: this.pageSize,
pageCurrent: pageCurrent,
value: value,
success: res => {
// console.log('data', res);
this.tableData = res.data
this.total = res.total
this.loading = false
}
})
},
// 伪request请求
request(options) {
const { pageSize, pageCurrent, success, value } = options
let total = tableData.length
let data = tableData.filter((item, index) => {
const idx = index - (pageCurrent - 1) * pageSize
return idx < pageSize && idx >= 0
})
if (value) {
data = []
tableData.forEach(item => {
if (item.name.indexOf(value) !== -1) {
data.push(item)
}
})
total = data.length
}
setTimeout(() => {
typeof success === 'function' &&
success({
data: data,
total: total
})
}, 500)
}
}
}
</script>
<style>
/* #ifndef H5 */
/* page {
padding-top: 85px;
} */
/* #endif */
.uni-group {
display: flex;
align-items: center;
}
</style>