<view style="margin:15px"><van-row><van-col span="20"><van-field value="{{ name }}" border="{{ false }}" disabled is-link bindtap="showPopup" label="传感器类别："/></van-col><van-col span="4"><van-button type="primary" size="small" style=" line-height: 90rpx;" bindtap="getCategoryArr">查询</van-button></van-col> </van-row><view class="table" style="margin-top:15px"><view class="tr"><view class="th">参数</view><view class="th" wx:for="{{headerList}}" wx:key="{{item1}}">{{item.title}}</view></view><view class="tr" wx:for="{{bodyList}}" wx:key="{{item2}}" data-index="{{index}}"><view class="td" wx:if="{{index==0}}">最大值</view><view class="td" wx:if="{{index==1}}">最小值</view><view class="td" wx:if="{{index==2}}">典型值</view><view class="td" wx:if="{{index==3}}">单位</view><view class="td" wx:if="{{index==4}}">精度</view> <view class="td" wx:if="{{item.param0}}">{{item.param0}}</view><view class="td" wx:if="{{item.param1}}">{{item.param1}}</view><view class="td" wx:if="{{item.param2}}">{{item.param2}}</view></view></view>
.js
const api = require('../../utils/api.js') // 引入api接口管理文件 Page({data: {headerList: [], //表头bodyList: [], //表身体categoryArr: [],// //弹出层控制show: false,id: '',name: '',},/*** 生命周期函数--监听页面加载*/onLoad: function (option) {this.getinfo()this.getCategoryArr()},// 获取 下拉框信息 getinfo() {api._get('/oil/queryTranList/' + wx.getStorageSync('userId'), {}).then(res => {console.log(res)let arr = []res.bodyList.forEach((item, index) => {for (const key in item) {item[key] = item[key] ? item[key] : '-'}arr.push(item)})this.setData({name: res.tranList[0].name,headerList: Object.assign([], res.headerList),bodyList: Object.assign([], arr),categoryArr: Object.assign([], res.tranList),})}).catch(e => {console.log(e)})},// 查询获取getCategoryArr() {api._get('/oil/tranInfo/' + this.data.id, ).then(res => {let arr = []res.bodyList.forEach((item, index) => {for (const key in item) {item[key] = item[key] ? item[key] : '-'}arr.push(item)})this.setData({headerList: Object.assign([], res.headerList),bodyList: Object.assign([], res.bodyList),})}).catch(e => {console.log(e)})},//选择器 点击完成按钮时触发onConfirm(event) {this.setData({'id': event.detail.value.id,'name': event.detail.value.name,show: false,});},//选择器 点击取消按钮时触发categoryOnClose() {this.setData({show: false});},//点击触发弹出框showPopup() {this.setData({show: true});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载 */onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},})
.wxss
page {height: 100%; font-size: 30rpx;}/* table */.table {border: 1px solid #dadada;border-right: 0;border-bottom: 0;width: 98%;font-size: 30rpx;}.tr {width: 100%;display: flex;justify-content: space-between;}.th,.td {padding: 10px;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;width: 100%}.th {font-weight: 400;background-color: #dadada}/* */.dynamic {margin-top: 15rpx;width: 100%;background: white;}.van-field__label--disabled {color: #646566 !important;}.van-field__control {color: #323233 !important;}.boxxx {width:100%;height:600rpx;background-color: dadada;}
Table数据量太多滚动
<view class="group"><view class="group-title">历史报警</view><view class="group-explain" style="color:red">注：横向内容过多时，可选择左右滑动。</view> <view class="table-wrap"><table header-row-class-name="header-class"headers="{{tableHeader2}}" data="{{ row }}" border="{{ border }}"/> </view></view>
.js
const api = require('../../utils/api.js') // 引入api接口管理文件const app = getApp()Page({data: {date:'-11-28 16:03:15',disabled:false,//设置是否能点击 false可以 true不能点击startDate: '-11-28 16:03:15',endDate: '2028-11-29 16:03:15',placeholder:'查询开始时间',date1:'-11-28 16:03:15', startDate1: '-11-28 16:03:15',endDate1: '2028-11-29 16:03:15',placeholder1:'查询结束时间',month: '',user_name: '', tableHeader2:[{prop: 'id',width: 150,label: '序号',},{prop: 'createTime',width: 150,label: '日期时间',},{prop: 'type',width: 152,label: '事件类型'},{prop: 'describe',width: 152,label: '事件描述'},{prop: 'nowValue',width: 110,label: '当前值'},{prop: 'warningValue',width: 110,label: '报警值'}],stripe: true,border: true,outBorder: true,height: '150px',row:[], row1:[], msg: '没有打卡记录哦～'},/*** 生命周期函数--监听页面加载*/onLoad: function () {},getCategoryArr(){api._get('/oil/queryWarningList', {starTime:this.data.date,endTime:this.data.date1}).then(res => { if (res.code ==500) {wx.showToast({title: res.msg,icon: 'none',duration: 2000})return false}let arr = [] res.warningEntities.forEach((item, index) => {for (const key in item) {item[key] = item[key] ? item[key] : '-'}arr.push(item)})this.setData({ row: Object.assign([], arr), })}).catch(e => {console.log(e)})},/*** 日历控件绑定函数 * 点击日期返回*/onPickerChange: function (e) {console.log(e.detail);this.setData({date: e.detail.dateString, }) }, onPickerChange1: function (e) {console.log(e.detail);this.setData({date1: e.detail.dateString}) },})
.wxss
.van-buttonone{margin: 20rpx;}.container {padding: 30rpx;}.group {margin-bottom: 60rpx;}.group .group-title {margin-bottom: 30rpx;font-size: 34rpx;font-weight: 700;color: #333;}.group .group-explain {margin-bottom: 20rpx;font-size: 28rpx;color: #666;}.header-class {border: 1rpx solid #55C355;background-color: #77c1f3;color: #fff!important;font-size: 28rpx;}.header-class .td:first-child {color: #55C355;}.row-class:nth-child(2n) {background-color: #c1e4c175;}
