You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.9 KiB
131 lines
2.9 KiB
1 year ago
|
<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>
|