初始化（包含登录模块）
This commit is contained in:
130
pages/extUI/table/table.vue
Normal file
130
pages/extUI/table/table.vue
Normal file
@@ -0,0 +1,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>
|
||||
193
pages/extUI/table/tableData.js
Normal file
193
pages/extUI/table/tableData.js
Normal file
@@ -0,0 +1,193 @@
|
||||
export default [{
|
||||
"date": "2020-09-01",
|
||||
"name": "Dcloud1",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-02",
|
||||
"name": "Dcloud2",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-03",
|
||||
"name": "Dcloud3",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-04",
|
||||
"name": "Dcloud4",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-05",
|
||||
"name": "Dcloud5",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-06",
|
||||
"name": "Dcloud6",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-07",
|
||||
"name": "Dcloud7",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-08",
|
||||
"name": "Dcloud8",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-09",
|
||||
"name": "Dcloud9",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-10",
|
||||
"name": "Dcloud10",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-11",
|
||||
"name": "Dcloud11",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-12",
|
||||
"name": "Dcloud12",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-13",
|
||||
"name": "Dcloud13",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-14",
|
||||
"name": "Dcloud14",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-15",
|
||||
"name": "Dcloud15",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-16",
|
||||
"name": "Dcloud16",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-01",
|
||||
"name": "Dcloud17",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-02",
|
||||
"name": "Dcloud18",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-03",
|
||||
"name": "Dcloud19",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-04",
|
||||
"name": "Dcloud20",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-05",
|
||||
"name": "Dcloud21",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-06",
|
||||
"name": "Dcloud22",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-07",
|
||||
"name": "Dcloud23",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-08",
|
||||
"name": "Dcloud24",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-09",
|
||||
"name": "Dcloud25",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-10",
|
||||
"name": "Dcloud26",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-11",
|
||||
"name": "Dcloud27",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-12",
|
||||
"name": "Dcloud28",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-13",
|
||||
"name": "Dcloud29",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-14",
|
||||
"name": "Dcloud30",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-15",
|
||||
"name": "Dcloud31",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-16",
|
||||
"name": "Dcloud32",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-01",
|
||||
"name": "Dcloud33",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-02",
|
||||
"name": "Dcloud34",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-03",
|
||||
"name": "Dcloud35",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-04",
|
||||
"name": "Dcloud36",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-05",
|
||||
"name": "Dcloud37",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-06",
|
||||
"name": "Dcloud38",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-07",
|
||||
"name": "Dcloud39",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-08",
|
||||
"name": "Dcloud40",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-09",
|
||||
"name": "Dcloud41",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-10",
|
||||
"name": "Dcloud42",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-11",
|
||||
"name": "Dcloud43",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-12",
|
||||
"name": "Dcloud44",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2020-09-13",
|
||||
"name": "Dcloud45",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2020-09-14",
|
||||
"name": "Dcloud46",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2020-09-15",
|
||||
"name": "Dcloud47",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2020-09-16",
|
||||
"name": "Dcloud48",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}]
|
||||
Reference in New Issue
Block a user