uni-app自制表格及其分页

展示效果：

1.引入插件

t-table表格【点击跳转】
uni-pagination分页器【点击跳转】

2.实例源码

 <view style="font-size: 12rpx;margin-top: 25rpx; width: 800rpx; height:auto"><t-table><t-tr fontSize="16"><t-th>序号</t-th><t-th>传感器类型</t-th><t-th>数值</t-th><t-th>时间节点</t-th></t-tr><t-tr v-for="item in tableList" :key="item.id" fontSize="16"><t-td>{{ item.id + 1 }}</t-td><t-td>{{ item.deviceName }}</t-td><t-td>{{ item.data }}</t-td><t-td>{{ item.dataTime }}</t-td></t-tr></t-table></view><uni-pagination style="margin-top: 15rpx;font-size: 15rpx;" title="标题文字" :total="this.totalContent"@change="paginationChange"></uni-pagination><script>// 表格import tTable from "@/components/t-table/t-table.vue"import tTh from '@/components/t-table/t-th.vue'import tTr from '@/components/t-table/t-tr.vue'import tTd from '@/components/t-table/t-td.vue'//分页器import uniPagination from '@/components/uni-pagination/uni-pagination.vue'export default {data() {return {//表格totalList: [],tableList: [],index: 10,totalContent: 0,};},components: {tTable,tTh,tTr,tTd,uniPagination,},beforeMount() {},methods: {paginationChange(e) {this.index = e.current * 10this.tableList.splice(0, this.tableList.length)if (this.index > this.totalList.length) {for (let i = this.index - 10, j = 0; i < this.totalList.length; i++)this.tableList[j++] = this.totalList[i]} else {for (let i = this.index - 10, j = 0; i < this.index; i++)this.tableList[j++] = this.totalList[i]}},async queryTHIForm() {if (this.queryDataForm.deviceName == '' || this.queryDataForm.dataTime == '') {uni.showToast({title: '数据框不能为空!',duration: 800,mask: true,})return;}this.tableList = []this.totalList = []this.totalContent = 0const res = await this.$Request({url: `getTHIData?dataTime=${this.queryDataForm.dataTime}`})if (res.data.code == 0) {for (let i = 0; i < res.data.result.length; i++) {let data = {}data.id = idata.deviceName = this.queryDataForm.deviceNamedata.dataTime = res.data.result[i].dataTimeif (this.queryDataForm.deviceName == '温度传感器') {data.data = res.data.result[i].t1} else if (this.queryDataForm.deviceName == '湿度传感器') {data.data = res.data.result[i].h1} else if (this.queryDataForm.deviceName == '光强传感器') {data.data = res.data.result[i].i1}this.totalList[i] = data}this.totalContent = this.totalList.lengthif (this.totalList.length < 10)this.index = this.totalList.lengthfor (let i = 0; i < this.index; i++)this.tableList[i] = this.totalList[i]console.log(this.tableList)}}}}
</script>

其中api.js及实例JSON字符串格式如下：
api.js：

const BACE_URL = 'http://172.16.40.118:8777/'//封装的请求借口函数
export const Request = (options) =>{return new Promise((resolve, reject) =>{uni.request({url: BACE_URL + options.url,method: options.method || 'GET',data: options.data || {},success: (res) =>{if(res.data.code !== 0){return uni.showToast({title:'获取数据失败'})}resolve(res)},fail:(err) =>{return uni.showToast({title:'请求借口失败'})reject(err)}})})
}

JSON字符串：

uni-app自制表格及其分页相关推荐

Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
Word：表格无法分页显示
造冰箱的大熊猫@cnblogs 2019/1/30 今天遇到一个Word中表格无法分页显示的问题,特记录下来以备后查我们知道,在Word中将表格不设置为"允许跨页断行",假设表格 ...
BootstrapTable去掉表格与分页的空白
BootstrapTable表格默认高度是100%,在表格数据量少的时候就存在table表格和分页存在空白处,这是由于fixed-table-body设置height:100%导致. 解决方法:fix ...

uni-app自制表格及其分页

uni-app自制表格及其分页

1.引入插件

2.实例源码

uni-app自制表格及其分页相关推荐

最新文章

热门文章