js 获取table当前行值第一列_微信小程序实现多复杂表格table的colspan，rowspan效果等...

效果：

可用选择月份，实现数据查询(必须后台数据交互)，这里只是介绍实现的样式

index.html

{{currentDate}}{{username + " " + currentDate + " 月工资表"}}单位：元本月暂无工资数据{{item.name}}{{item.value}}{{item2.name}}{{item2.value}}{{item3.name}}{{item3.value}}

index.wxss

.container { width: 100%; display: flex; flex-direction: column; box-sizing: border-box; background: white;}.picker { width: 100%;}.date-text { font-size: 32rpx; padding: 20rpx 10rpx; text-align: center;}.title-wrapper { display: flex; width: 100%; justify-content: center; align-items: center; padding: 20rpx; box-sizing: border-box;}.title { flex: 1; font-size: 34rpx; text-align: center; font-weight: 700; color: #09bb07;}.yuan { font-size: 24rpx; color: #09bb07;}.table-wrapper { width: 100%; display: flex; flex-direction: column; border-top: 1rpx solid #DCDFE6;}.row1 { width: 100%; display: flex; flex-direction: row; align-items: center; font-size: 32rpx; box-sizing: border-box; border-bottom: 1rpx solid #DCDFE6; }.text { flex: 1; padding: 10rpx; line-height: 60rpx; height: 60rpx;}.column2-wrapper { display: flex; flex-direction: column; flex: 3; justify-content: center; border-left: 1rpx solid #DCDFE6;}.column2 { display: flex; flex: 1; align-items: center; border-bottom: 1rpx solid #DCDFE6;}.column2:last-child{ border-bottom: none;}.column3-wrapper { display: flex; flex-direction: column; flex: 2; justify-content: center; border-left: 1rpx solid #DCDFE6;}.column3 { display: flex; flex: 1; align-items: center; border-bottom: 1rpx solid #DCDFE6;}.column3:last-child{ border-bottom: none;}.column-value{ display: flex; align-self: flex-end; margin-right: 10rpx; padding: 10rpx; line-height: 60rpx; height: 60rpx;}.column4-wrapper{ display: flex; flex-direction: column; flex: 1; justify-content: center; border-left: 1rpx solid #DCDFE6;}.picker-content{ display: flex; width: 100%; justify-content: center; align-items: center; border-bottom: 1rpx solid rgba(7, 17, 27, 0.1);}.date-icon{ width: 80rpx; height: 80rpx;}.nodata{ width: 100%; text-align: center; font-size: 32rpx; color: #666; padding: 20rpx;}

index.js

import MockData from './mockdata.js'import { formatTime} from '../../utils/util.js'Page({ data: { currentDate: '', username: 'XXX', list: '' },  onLoad: function () { wx.setNavigationBarTitle({ title: '工资查询', }) //设置当前年月 this.setCurrentDate() this._getSalary() }, setCurrentDate(){ //获取当前年月 let date = new Date() let fmtDate = formatTime(date).substring(0, 7) this.setData({ currentDate: fmtDate, }) console.log(fmtDate) }, //日期变化回调 dateChange(res) { console.log(res) let value = res.detail.value this.setData({ currentDate: value }) //请求数据 this._getSalary() }, //模拟请求数据 _getSalary(){ this.setData({ list: MockData.data }) } })

mockdata.js(index.js里调用的模拟数据)

// 模拟的数据export default { status: 200, code: "ok