精华内容
下载资源
问答
  • 微信小程序table表格
    2021-03-15 16:54:55

    在这里插入图片描述
    wxml

      <view class="table">
    <view class="tableTr">
      <view class="Tr">厂商品牌</view>
      <view class="Tr">销量</view>
      <view class="Tr">同比增长</view>
      <view class="Tr">环比增长</view>
    </view>
    <block wx:for="{{list}}">
      <view class="tableTd" style="background:#F3F7FA;" wx:if="{{index%2===0}}">
        <view class="Td">{{item.name}}</view>
        <view class="Td">{{item.size}}</view>
        <view class="Td">{{item.height}}</view>
        <view class="Td">{{item.width}}</view>
      </view>
      <view class="tableTd" style="background: #FFFFFF;" wx:else>
        <view class="Td">{{item.name}}</view>
        <view class="Td">{{item.size}}</view>
        <view class="Td">{{item.height}}</view>
        <view class="Td">{{item.width}}</view>
      </view>
    </block>
    <!-- 上拉加载更多 -->
    <view class="aa CommonWight">上拉加载更多</view>
    
    就是使用block 循环,wx:if 做判断 奇数偶数

    wxss

    	.tabls {
    background: #ffffff;
    margin-top: 20rpx;
    border-radius: 12rpx;
    }
    
    .tabls_top {
    height: 94rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20rpx 0 20rpx;
    }
    
    .tables_title {
    font-size: 32rpx;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    }
    
    .btn {
    font-size: 24rpx !important;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0080FF;
    height: 40rpx !important;
    background: #ffffff;
    }
    
    .table {
    border: 0px solid darkgray;
    height: 540rpx;
    }
    
    .tableTr {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 99%;
    height: 50rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 0px rgba(0, 128, 255, 0.2);
    border-radius: 12rpx;
    border: 1px solid #0080FF;
    }
    
    .Tr {
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0080FF;
    flex: 0.25;
    text-align: center;
    }
    
    .tableTd {
    height: 48rpx;
    display: flex;
    width: 99%;
    border-radius: 12rpx;
    align-items: center;
    }
    
    .Td {
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    flex: 0.25;
    text-align: center;
    }
    

    wxjs

        list: [
            { name: "阿斯顿0", size: 666, height: "0.1", width: "0.2" },
            { name: "阿斯顿1", size: 666, height: "0.1", width: "0.2" },
            { name: "阿斯顿2", size: 666, height: "0.1", width: "0.2" },
            { name: "阿斯顿3", size: 666, height: "0.1", width: "0.2" },
            { name: "阿斯顿4", size: 666, height: "0.1", width: "0.2" },
            { name: "阿斯顿5", size: 666, height: "0.1", width: "0.2" },
            { name: "阿斯顿6", size: 666, height: "0.1", width: "0.2" },
            { name: "阿斯顿7", size: 666, height: "0.1", width: "0.2" },
        ]
    
    更多相关内容
  • 主要为大家详细介绍了微信小程序实现简易table表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序实现的绘制table表格功能,涉及微信小程序数据读取及界面布局相关操作技巧,需要的朋友可以参考下
  • 微信小程序 table表格 PC版本

    千次阅读 2022-04-16 14:42:39
    所以要求可以通过小程序分享到微信,PC端登录微信,在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~ 实现:表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等... 先上效果图 (mock...

    公司项目啊....其实小程序页面的商品列表也有宫格、列表、大图模式了,尽管描述得不那么详细,但是信息量也能看到个大概,但是领导或业务员比较喜欢看表格详细点,罗列得比较清晰。 所以要求可以通过小程序分享到微信,PC端登录微信,在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~

    实现:表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等...

    先上效果图  (mock数据)

    小程序是没有原生 table tr th td 这些标签的,但是可以通过css 样式控制

    v-for 循环换成 wx:for  wx:key 就行 原理都是一样的~

    html 结构

    <view class='container'>
    		<view class='table'>
    			<view class='table_thead'>
    				<view class="th" style='width: 5%;'>序号</view>
    				<view class='th'>图片</view>
    				<view class='th'>型号</view>
    				<view class='th'>颜色</view>
    				<view class='th'>色号</view>
    				<view class='th'>规格</view>
    				<view class='th'>尺寸</view>
    				<view class='th'>件数</view>
    				<view class='th'>价格</view>
    				<view class='th'>备注</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width: 5%;'>11</view>
    				<view class="td">
    					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
    				</view>
    				<view class="td">C01床</view>
    				<view class="td">棕色</view>
    				<view class="td">康高:AF-2721</view>
    				<view class='td'>
    					<view class="table_Text_class">舒适版</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">1500*2000*10*7</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">普通3件 气动9件</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">2389</view>
    				</view>
    				<view class='td'>
    					备注备注备注备注备注备注备注备注备注备注备注备注
    				</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width: 5%;'>22</view>
    				<view class="td">
    					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
    				</view>
    				<view class="td">C01床</view>
    				<view class="td">棕色</view>
    				<view class="td">康高:AF-2721</view>
    				<view class='td'>
    					<view class="table_Text_class">舒适版</view>
    					<view class="table_Text_class">舒适版</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">1500*2000*10*8</view>
    					<view class="table_Text_class">1500*2000*10*8</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">普通3件 气动8件</view>
    					<view class="table_Text_class">普通3件 气动8件</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">23855</view>
    					<view class="table_Text_class">23855</view>
    				</view>
    				<view class='td'>
    					备注备注备注备注备注备注备注备注备注备注备注备注
    				</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width: 5%;'>333</view>
    				<view class="td">
    					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
    				</view>
    				<view class="td">C01床</view>
    				<view class="td">棕色</view>
    				<view class="td">康高:AF-2721</view>
    				<view class='td'>
    					<block v-for="inds1 of num" :key="inds1">
    						<view class="table_Text_class">舒适版</view>
    					</block>
    				</view>
    				<view class='td'>
    					<block v-for="inds2 of num" :key="inds2">
    						<view class="table_Text_class">1500*2000*10*12</view>
    					</block>
    				</view>
    				<view class='td'>
    					<block v-for="inds3 of num" :key="inds3">
    						<view class="table_Text_class">普通3件 气动3件</view>
    					</block>
    				</view>
    				<view class='td'>
    					<block v-for="inds4 of num" :key="inds4">
    						<view class="table_Text_class">2384</view>
    					</block>
    				</view>
    				<view class='td'>
    					备注备注备注备注备注备注备注备注备注备注备注备注
    				</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width: 5%;'>测试</view>
    				<view class="td">
    					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
    				</view>
    				<view class="td">C01床</view>
    				<view class="td">棕色</view>
    				<view class="td">康高:AF-2721</view>
    				<view class='td'>
    					<view class="table_Text_class">舒适版</view>
    					<view class="table_Text_class">旗舰版</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">1500*2000*10*111111</view>
    					<view class="table_Text_class">1500*2000*10*222222</view>
    					<view class="table_Text_class">1500*2000*10*333333</view>
    					<view class="table_Text_class">1500*2000*10*444444</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">3</view>
    					<view class="table_Text_class">普通3件 气动5件</view>
    					<view class="table_Text_class">3</view>
    					<view class="table_Text_class">3</view>
    				</view>
    				<view class='td'>
    					<view class="table_Text_class">2381</view>
    					<view class="table_Text_class">2382</view>
    					<view class="table_Text_class">2383</view>
    					<view class="table_Text_class">2384</view>
    				</view>
    				<view class='td'>
    					纳帕皮保用十年 头层真皮 舒适版加800元 旗舰版加1000元 高箱床加300元
    				</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width: 5%;'>333</view>
    				<view class="td">
    					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
    				</view>
    				<view class="td">C01床</view>
    				<view class="td">棕色</view>
    				<view class="td">康高:AF-2721</view>
    				<view class='td'>
    					<block v-for="inds1 of 3" :key="inds1">
    						<view class="table_Text_class">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试商品商品商品</view>
    					</block>
    				</view>
    				<view class='td'>
    					<block v-for="inds2 of 3" :key="inds2">
    						<view class="table_Text_class">1500*2000*10*10</view>
    					</block>
    				</view>
    				<view class='td'>
    					<block v-for="inds3 of 3" :key="inds3">
    						<view class="table_Text_class">普通3件 气动3件</view>
    					</block>
    				</view>
    				<view class='td'>
    					<block v-for="inds4 of 3" :key="inds4">
    						<view class="table_Text_class">2381</view>
    					</block>
    				</view>
    				<view class='td'>
    					备注备注备注备注备注备注备注备注备注备注备注备注
    				</view>
    			</view>
    			<block v-for="index of 12" :key="index">
    				<view class='table_tbody'>
    					<view class='td' style='width: 5%;'>{{index}}</view>
    					<view class="td">
    						<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
    					</view>
    					<view class="td">C01床</view>
    					<view class="td">棕色</view>
    					<view class="td">康高:AF-2721</view>
    					<view class='td'>
    						<block v-for="inds1 of 3" :key="inds1">
    							<view class="table_Text_class">舒适版</view>
    						</block>
    					</view>
    					<view class='td'>
    						<block v-for="inds2 of 3" :key="inds2">
    							<view class="table_Text_class">1500*2000*10*5</view>
    						</block>
    					</view>
    					<view class='td'>
    						<block v-for="inds3 of 3" :key="inds3">
    							<view class="table_Text_class">普通3件 气动3件</view>
    						</block>
    					</view>
    					<view class='td'>
    						<block v-for="inds4 of 3" :key="inds4">
    							<view class="table_Text_class">2384</view>
    						</block>
    					</view>
    					<view class='td'>
    						备注备注备注备注备注备注备注备注备注备注备注备注
    					</view>
    				</view>
    			</block>
    		</view>
    	</view>

    css 样式

    page {
    		width: 100%;
    		white-space: nowrap;
    		overflow: scroll;
    	}
    
    	.container {
    		width: 100%;
    		height: 100%;
    		display: flex;
    		background-color: white;
    	}
    
    	.table {
    		width: 100%;
    		display: inline-flex;
    		flex-direction: column;
    		border: 1rpx solid rgba(218, 217, 217, 1);
    		border-bottom: 0;
    	}
    
    	.table_thead {
    		width: 100%;
    		height: 40px;
    		border-top: 1rpx solid rgba(218, 217, 217, 1);
    		border-bottom: 1rpx solid rgba(218, 217, 217, 1);
    		display: inline-flex;
    		position: -webkit-sticky;
    		position: -moz-sticky;
    		position: -ms-sticky;
    		position: -o-sticky;
    		position: sticky;
    		top: 0;
    		z-index: 99;
    	}
    
    	.th,
    	.td {
    		width: 10.555%;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		background-color: #FFFF00;
    		border-right: 1rpx solid rgba(218, 217, 217, 1);
    		border-bottom: 1rpx solid rgba(218, 217, 217, 1);
    		border-width: thin;
    		font-size: 30rpx;
    		font-weight: bold;
    	}
    
    	.table_tbody {
    		width: 100%;
    		display: inline-flex;
    		flex-direction: row;
    		border-bottom: 1px solid rgba(218, 217, 217, 1);
    	}
    
    	.td {
    		background: white;
    		min-height: 60px;
    		font-weight: normal;
    		text-align: center;
    		word-wrap: break-word;
    		word-break: break-all;
    		white-space: pre-line;
    	}
    
    	.table_Text_class {
    		width: 100%;
    		min-height: 40px;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		text-align: center;
    		flex-basis: auto;
    		flex-grow: 1;
    		-webkit-flex-grow: 1;
    		word-wrap: break-word;
    		word-break: break-all;
    		white-space: pre-line;
    		border-bottom: 1rpx solid rgba(218, 217, 217, 1);
    		border-width: thin;
    	}
    
    	.table_Text_class:last-child {
    		border-bottom: none;
    	}
    
    

    以上是微信小程序table表格随着浏览器窗口大小自适应改变大小,如果不想自适应,屏幕小出现滚动条可以左右滑动的情况,屏幕大的时候表格内容居中显示,两边留白。那么列的宽度就不要写百分比%,直接写数值。先看效果图

     html 结构

    <view class='container'>
      <view class='table'>
        <view class='table_thead'>
          <view class="th" style='width:70px;'>序号</view>
          <view class='th'>图片</view>
          <view class='th' style='width:100px;'>型号</view>
          <view class='th' style='width:100px;'>颜色</view>
          <view class='th'>色号</view>
          <view class='th'>规格</view>
          <view class='th'>尺寸</view>
          <view class='th' style='width:100px;'>件数</view>
          <view class='th' style='width:100px;'>价格</view>
          <view class='th'>备注</view>
        </view>
        <block wx:for="{{list}}" wx:key="index">
          <view class='table_tbody'>
            <view class='td' style='width:70px;'>{{index+1}}</view>
            <view class="td">
              <image src="{{item.image}}" mode="aspectFit" bindtap="imgClick" data-index="{{index}}" lazy-load style="width: 100%;height: 80%;"></image>
            </view>
            <view class="td" style='width:100px;'>{{item.param_model}}</view>
            <view class="td" style='width:100px;'>{{item.param_color}}</view>
            <view class="td">{{item.param_color_num}}</view>
            <view class='td'>
              <block wx:for="{{item.param_sku}}" wx:for-item="u" wx:key="u">
                <view class="table_Text_class">{{u.sku}}</view>
              </block>
            </view>
            <view class='td'>
              <block wx:for="{{item.param_sku}}" wx:for-item="e" wx:key="e">
                <view class="table_Text_class">{{e.size}}</view>
              </block>
            </view>
            <view class='td' style='width:100px;'>
              <block wx:for="{{item.param_sku}}" wx:for-item="m" wx:key="m">
                <view class="table_Text_class">{{m.num}}</view>
              </block>
            </view>
            <view class='td' style='width:100px;'>
              <block wx:for="{{item.param_sku}}" wx:for-item="e" wx:key="e">
                <view class="table_Text_class">{{e.price}}</view>
              </block>
            </view>
            <view class='td'>{{item.param_custom_remark == null?"":item.param_custom_remark}}</view>
          </view>
        </block>
      </view>
    </view>

    css 样式

    page {
      width: 100%;
      white-space: nowrap;
      box-sizing: border-box;
      overflow: scroll;
    }
    
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      background-color: white;
    }
    
    .table {
      margin: 0 auto;
      display: inline-flex;
      flex-direction: column;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-bottom: 0;
    }
    
    .table_thead {
      width: 100%;
      height: 40px;
      border-top: 1rpx solid rgba(218, 217, 217, 1);
      display: inline-flex;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 99;
    }
    
    .th,
    .td {
      width: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #FFFF00;
      border-right: 1rpx solid rgba(218, 217, 217, 1);
      border-bottom: 1rpx solid rgba(218, 217, 217, 1);
      border-width: thin;
      font-size: 14px;
      font-weight: bold;
    }
    
    .table_tbody {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      border-bottom: 1px solid rgba(218, 217, 217, 1);
    }
    
    .td {
      background: white;
      min-height: 60px;
      font-weight: normal;
      text-align: center;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-line;
    }
    
    .table_Text_class {
      width: 100%;
      min-height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-basis: auto;
      /* flex-basis: 0; */
      flex-grow: 1;
      -webkit-flex-grow: 1;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-line;
      border-bottom: 1rpx solid rgba(218, 217, 217, 1);
      border-width: thin;
    }
    
    .table_Text_class:last-child {
      border-bottom: none;
    }

    如果表格每一列的数据比较简短,那么以上这两种方式都可以满足需求了,但是如果列的内容里面还有行,并且行里面的文字还长,超出了列的宽度文字自动换行后导致高度撑开,高度和边框线对不齐的情况,可以根据需求改下结构和样式。先上效果图!

    html 结构

    <view class='container'>
    		<view class='table'>
    			<view class='table_thead'>
    				<view class="th" style='width:70px;'>序号</view>
    				<view class='th'>图片</view>
    				<view class='th' style='width:100px;'>型号</view>
    				<view class='th' style='width:100px;'>颜色</view>
    				<view class='th'>色号</view>
    				<view class='th'>规格</view>
    				<view class='th'>尺寸</view>
    				<view class='th' style='width:100px;'>件数</view>
    				<view class='th' style='width:100px;'>价格</view>
    				<view class='th'>备注</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width:70px;font-weight: bold;'>测试</view>
    				<view class="td" style="padding: 10px 0px;">
    					<image src="/static/logo.png" mode="scaleToFill"
    						style="width: 150px;height: 150px;margin: auto;"></image>
    				</view>
    				<view class="td" style='width:100px;'>C01床</view>
    				<view class="td" style='width:100px;'>棕色</view>
    				<view class="td">康高:AF- 2721</view>
    				<view class="td max_td">
    					<view class="max_td_row">
    						<view class="max_td_row_item">舒适版</view>
    						<view class="max_td_row_item">1700*2180*1200</view>
    						<view class="max_td_row_item" style="width: 100px;">普通3件</view>
    						<view class="max_td_row_item" style="width: 99.5px;">2380</view>
    					</view>
    				</view>
    				<view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width:70px;font-weight: bold;'>测试</view>
    				<view class="td" style="padding: 10px 0px;">
    					<image src="/static/logo.png" mode="scaleToFill"
    						style="width: 150px;height: 150px;margin: auto;"></image>
    				</view>
    				<view class="td" style='width:100px;'>C01床</view>
    				<view class="td" style='width:100px;'>棕色</view>
    				<view class="td">康高:AF- 2721</view>
    				<view class="td max_td">
    					<view v-for="index2 of 2" :key="index2" class="max_td_row">
    						<view class="max_td_row_item">舒适版</view>
    						<view class="max_td_row_item">1700*2180*1200</view>
    						<view class="max_td_row_item" style="width: 100px;">普通3件</view>
    						<view class="max_td_row_item" style="width: 99.5px;">2380</view>
    					</view>
    				</view>
    				<view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view>
    			</view>
    			<view class='table_tbody'>
    				<view class='td' style='width:70px;font-weight: bold;'>测试</view>
    				<view class="td" style="padding: 10px 0px;">
    					<image src="/static/logo.png" mode="scaleToFill"
    						style="width: 150px;height: 150px;margin: auto;"></image>
    				</view>
    				<view class="td" style='width:100px;'>C01床</view>
    				<view class="td" style='width:100px;'>棕色</view>
    				<view class="td">康高:AF- 2721</view>
    				<view class="td max_td">
    					<view v-for="index2 of 3" :key="index2" class="max_td_row">
    						<view class="max_td_row_item">舒适版</view>
    						<view class="max_td_row_item">1700*2180*1200</view>
    						<view class="max_td_row_item" style="width: 100px;">普通3件</view>
    						<view class="max_td_row_item" style="width: 99.5px;">2380</view>
    					</view>
    				</view>
    				<view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view>
    			</view>
    			<block v-for="index of 3" :key="index">
    				<view class='table_tbody'>
    					<view class='td' style='width:70px;font-weight: bold;'>{{index}}</view>
    					<view class="td" style="padding: 10px 0px;">
    						<image src="/static/logo.png" mode="scaleToFill"
    							style="width: 150px;height: 150px;margin: auto;"></image>
    					</view>
    					<view class="td" style='width:100px;'>C01床</view>
    					<view class="td" style='width:100px;'>棕色</view>
    					<view class="td">康高:AF- 2721</view>
    					<view class="td max_td">
    						<view class="max_td_row">
    							<view class="max_td_row_item">舒适版</view>
    							<view class="max_td_row_item">1700*2180*1200</view>
    							<view class="max_td_row_item" style="width: 100px;">普通3件 气动5件 ---测试测试测试</view>
    							<view class="max_td_row_item" style="width: 99.5px;">2380</view>
    						</view>
    						<view v-for="index2 of 3" :key="index2" class="max_td_row">
    							<view class="max_td_row_item">舒适版{{index2}}</view>
    							<view class="max_td_row_item">1700*2180*1200</view>
    							<view class="max_td_row_item" style="width: 100px;">3</view>
    							<view class="max_td_row_item" style="width: 99.5px;">2380</view>
    						</view>
    					</view>
    					<view class='td'>每一行的高度都是不固定的,由内容撑开,每一列 td 默认高度为90px,图片为固定150px高度,当td 高度大于图片高度时图片居中显示,文字过长自动换行内容撑开高度,左右两边的单元格高度也能保持一致</view>
    				</view>
    			</block>
    		</view>
    	</view>

    css 样式

    	page {
    		width: 100%;
    		white-space: nowrap;
    		box-sizing: border-box;
    		overflow: scroll;
    	}
    
    	.container {
    		width: 100%;
    		height: 100%;
    		display: flex;
    		background-color: white;
    	}
    
    	.table {
    		margin: 0 auto;
    		display: inline-flex;
    		flex-direction: column;
    		border: 1px solid rgba(218, 217, 217, 1);
    		border-bottom: 0;
    	}
    
    	.table_thead {
    		width: 100%;
    		height: 40px;
    		border-top: 1px solid rgba(218, 217, 217, 1);
    		border-width: thin;
    		display: inline-flex;
    		position: -webkit-sticky;
    		position: sticky;
    		top: 0;
    		z-index: 99;
    	}
    
    	.th,
    	.td {
    		width: 200px;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		background-color: #FFFF00;
    		border-right: 1px solid rgba(218, 217, 217, 1);
    		border-bottom: 1px solid rgba(218, 217, 217, 1);
    		border-width: thin;
    		font-size: 14px;
    		font-weight: bold;
    	}
    
    	.table_tbody {
    		width: 100%;
    		display: inline-flex;
    		flex-direction: row;
    		border-bottom: 1px solid rgba(218, 217, 217, 1);
    	}
    
    	.td {
    		background: white;
    		min-height: 90px;
    		font-weight: normal;
    		text-align: center;
    		word-wrap: break-word;
    		word-break: break-all;
    		white-space: pre-line;
    	}
    
    	.max_td {
    		width: 600px;
    	}
    
    	.max_td_row {
    		width: 100%;
    		display: flex;
    		border-bottom: 1px solid rgba(218, 217, 217, 1);
    		flex-basis: auto;
    		flex-grow: 1;
    		-webkit-flex-grow: 1;
    	}
    
    	.max_td_row:last-child {
    		border-bottom: none;
    	}
    
    	.max_td_row_item {
    		width: 200.5px;
    		border-right: 1px solid rgba(218, 217, 217, 1);
    		border-width: thin;
    		min-height: 30px;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		text-align: center;
    	}
    
    	.max_td_row_item:last-child {
    		border-right: none;
    	}

    js 就不贴了~

    我还有一篇文章是微信小程序 table 表格,可以固定表头和表格首列 右侧表格可以左右滚动,(多种表格示例)有兴趣可以去看看 https://blog.csdn.net/m0_61073617/article/details/124430213

    展开全文
  • 最近想要捣鼓一个自己的小程序,其中数据展示部分比较多,想用table来做展示,但是微信小程序并没有table组件,于是就自己动手捣鼓了一个,勉强能用。 可以看看效果: etable使用介绍 etable的使用很简单,分为 ...
  • 最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~在这里做下记录!...

    最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做下记录!

    (一)

    1.左侧一列固定不动

    2.右侧表格内容可以左右滚动

    3.单元格内容平均分配

    4.每一行行高可以由内容撑开 通过 js 设置左侧一列行高与右侧表格内容行高保持一致

    先上效果图~

    html 结构

    <view class='table'>
      <!-- 左侧固定 -->
      <view class='table_left_column'>
        <view class='left_col_item'>排班</view>
        <view class='left_col_item' style="height:{{timeHeight1}}px">上午</view>
        <view class='left_col_item' style="height:{{timeHeight2}}px">下午</view>
        <view class='left_col_item' style="height:{{timeHeight3}}px">晚上</view>
      </view>
      <!-- 右侧表格滚动 -->
      <view class="table_right_scroll_box">
        <block wx:for="{{list}}" wx:for-index="index" wx:key="index">
          <view class='table_tr_item tableRow{{index}}'>
            <block wx:for="{{item.data}}" wx:for-item="ditem" wx:for-index="dindex" wx:key="dindex">
              <view wx:if="{{index == 0}}" class='tr_th tr_td'> 
                <view class="">{{ditem.date}}</view>
                <view class="">{{ditem.day}}</view>
              </view>
              <view wx:else class='tr_td'>
                <block wx:for="{{ditem.userList}}" wx:for-item="uitem" wx:for-index="uindex" wx:key="uindex">
                  <view class="tr_td_row">{{uitem.name}}</view>
                </block>
              </view>
            </block>
          </view>
        </block>
      </view>
    </view>

    css 样式  flex-basis 计算主轴是否有多余空间  flex-grow属性都为1 则它们将等分剩余空间

    page {
      background: #f3f3f3;
      font-size: 30rpx;
    }
    
    .table {
      display: flex;
      background: white;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-bottom: 0;
    }
    
    .table_left_column {
      width: 100rpx;
      height: auto;
      display: flex;
      flex-direction: column;
    }
    
    .left_col_item {
      width: 100rpx;
      min-height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-bottom: 1rpx solid #e5e5e5;
      color: #000;
      font-weight: bolder;
    }
    
    .table_right_scroll_box {
      width: 1400rpx;
      height: auto;
      white-space: nowrap;
      overflow-x: scroll;
      border-left: 1rpx solid #e5e5e5;
      font-weight: normal;
    }
    
    .table_tr_item {
      width: 1400rpx;
      display: flex;
      flex-direction: row;
    }
    
    .tr_th {
      background: rgba(241, 252, 255, 1);
    }
    
    .tr_th view:last-child {
      font-size: 25rpx;
    }
    
    .tr_td {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 200rpx;
      min-height: 90rpx;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-top: 0;
      border-left: 0;
    }
    
    .tr_td_row {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 60rpx;
      color: rgba(55, 134, 244, 0.8);
      flex-basis: auto;
      flex-grow: 1;
      -webkit-flex-grow: 1;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-line;
      border-bottom: 1rpx solid rgba(218, 217, 217, 1);
    }
    
    .tr_td_row:last-child {
      border-bottom: none;
    }

    js 数据结构 页面的生命周期函数

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        timeHeight1:0,
        timeHeigh2:0,
        timeHeigh3:0,
        list: [
          {
            time: '排班',
            data: [{
                date: '周一',
                day: '04/25',
                userList: []
              },
              {
                date: '周二',
                day: '04/26',
                userList: []
              },
              {
                date: '周三',
                day: '04/27',
                userList: []
              },
              {
                date: '周四',
                day: '04/28',
                userList: []
              },
              {
                date: '周五',
                day: '04/29',
                userList: []
              },
              {
                date: '周六',
                day: '04/30',
                userList: []
              },
              {
                date: '周日',
                day: '05/01',
                userList: []
              }
            ]
          },
        {
          time: '上午',
          data: [{
              date: '周一',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周二',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周三',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周四',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周五',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周六',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周日',
              day: '00/00',
              teacher: []
            }
          ]
        },
        {
          time: '下午',
          data: [{
              date: '周一',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周二',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周三',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周四',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周五',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周六',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周日',
              day: '00/00',
              userList: [{
                code: '000',
                name: '值班人'
              }]
            }
          ]
        },
        {
          time: '晚上',
          data: [{
              date: '周一',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周二',
              day: '00/00',
              userList: [{
                  code: '000',
                  name: '值班人'
                },
                {
                  code: '000',
                  name: '值班人'
                }
              ]
            },
            {
              date: '周三',
              day: '00/00',
              userList: [{
                code: '000',
                name: '值班人'
              }]
            },
            {
              date: '周四',
              day: '00/00',
              userList: []
            },
            {
              date: '周五',
              day: '00/00',
              userList: [{
                code: '000',
                name: '值班人'
              }]
            },
            {
              date: '周六',
              day: '00/00',
              userList: [{
                code: '000',
                name: '值班人'
              }]
            },
            {
              date: '周日',
              day: '00/00',
              userList: []
            }
          ]
        }
      ],
    
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
        // --- start --- 这里的代码  还可以优化的
    
        // 1. 封装一个函数,把这里的代码剪切进去,onReady、onShow 这两个生命周期函数都调用一次函数
        // 2. 使用 延时器包住这里的代码 setTimeout(function () {剪切代码放这里}, 300);
        // 为什么? 因为(上午、下午、晚上)单元格的高度是计算出来的,如果请求后台接口的数据速度慢 
        // 了,数据还没有渲染出来,这个时候去获取元素.tableRow1/2/3 的高度是不准确的, 所以就有了
        // 上面的2条建议
    
    
        let query = wx.createSelectorQuery();
        query.select('.tableRow1').boundingClientRect(rect => {
      	  //获取到元素
          let height = rect.height;
          //给页面赋值
          this.setData({
            timeHeight1: height - 1 //不减1 边框线对不齐
          })
        }).exec();
        query.select('.tableRow2').boundingClientRect(rect => {
          let height = rect.height;
          this.setData({
            timeHeight2: height - 1
          })
        }).exec();
        query.select('.tableRow3').boundingClientRect(rect => {
          let height = rect.height;
          this.setData({
            timeHeight3: height - 1
          })
        }).exec();
    
    
       // --- end --- 这里代码
    
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    如果不想要左侧固定,整个table 表格都可以滚动的 那么可以修改结构和样式 比如把左侧固定的代码注释掉,在 list 循环下每行再加一个td单元格 修改宽度和字体粗细和以前一样的样式就ok

    修改前

     修改后

     贴下代码

    <view class='table'>
      <!-- 左侧固定 -->
      <!-- <view class='table_left_column'>
        <view class='left_col_item'>排班</view>
        <view class='left_col_item' style="height:{{timeHeight1}}px">上午</view>
        <view class='left_col_item' style="height:{{timeHeight2}}px">下午</view>
        <view class='left_col_item' style="height:{{timeHeight3}}px">晚上</view>
      </view> -->
      <!-- 右侧表格滚动 -->
      <view class="table_right_scroll_box">
        <block wx:for="{{list}}" wx:for-index="index" wx:key="index">
          <view class='table_tr_item tableRow{{index}}'>
            <view class="tr_td">{{item.time}}</view>
            <block wx:for="{{item.data}}" wx:for-item="ditem" wx:for-index="dindex" wx:key="dindex">
              <view wx:if="{{index == 0}}" class='tr_th tr_td'> 
                <view class="">{{ditem.date}}</view>
                <view class="">{{ditem.day}}</view>
              </view>
              <view wx:else class='tr_td'>
                <block wx:for="{{ditem.userList}}" wx:for-item="uitem" wx:for-index="uindex" wx:key="uindex">
                  <view class="tr_td_row">{{uitem.name}}</view>
                </block>
              </view>
            </block>
          </view>
        </block>
      </view>
    </view>

    (二)

    还有一种表格也是

    1.左侧固定

    2.右侧表格左右滚动

    3.td 单元格里面没有行 单纯放一条数据

    4.适合一个产品,不同商家的价格对比

     可以根据需求修改下结构和样式  先上效果图看看  

    html 结构

    <view class='table'>
      <!-- 左侧固定 -->
      <view class='table_left_column'>
        <view class='left_col_item'>品种</view>
        <view class='left_col_item' wx:for="{{fruitTypeList}}" wx:for-index="index" wx:key="index">{{item.typeName}}</view>
      </view>
      <!-- 右侧表格滚动 -->
      <view class="table_right_scroll_box">
        <view class="flex_direction_column_item" wx:for="{{fruitList}}" wx:for-index="index" wx:key="index">
          <view class='item_name'>{{item.name}}</view>
          <view wx:for="{{item.list}}" wx:for-item="litem" wx:for-index="lindex" wx:key="lindex" class='item_name item_price'>
            <block wx:if="{{litem.price !='缺货'}}">¥{{litem.price}}/斤</block>
            <block wx:else>缺货</block>
          </view>
        </view>
      </view>
    </view>

    css 样式

    page {
      background: #f3f3f3;
      font-size: 30rpx;
    }
    
    .table {
      display: flex;
      background: white;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-bottom: 0;
    }
    
    .table_left_column {
      min-width: 150rpx;
      height: auto;
      display: flex;
      flex-direction: column;
    }
    
    .left_col_item {
      width: 100%;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-bottom: 1rpx solid #e5e5e5;
      color: #000;
      font-weight: bolder;
    }
    
    .table_right_scroll_box {
      display: flex;
      white-space: nowrap;
      overflow-x: scroll;
      border-left: 1rpx solid #e5e5e5;
      font-weight: normal;
      /* border: 1px solid red; */
    }
    
    .flex_direction_column_item {
      min-width: 200rpx;
      display: inline-block;
      /* border: 1px solid #000; */
    }
    
    .item_name {
      min-width: 200rpx;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: bolder;
      color: rebeccapurple;
      border-right: 1rpx solid #e5e5e5;
      border-bottom: 1rpx solid #e5e5e5;
    }
    
    .item_price {
      color: #7c2929;
      letter-spacing: 1rpx;
    }

    js 数据结构

        fruitTypeList: [{
          "fruitTypeId": 1,
          "typeName": "苹果"
        },
        {
          "fruitTypeId": 2,
          "typeName": "香蕉"
        },
        {
          "fruitTypeId": 3,
          "typeName": "橙子"
        },
        {
          "fruitTypeId": 4,
          "typeName": "山竹"
        },
        {
          "fruitTypeId": 5,
          "typeName": "荔枝"
        }, {
          "fruitTypeId": 6,
          "typeName": "芒果"
        },
        {
          "fruitTypeId": 7,
          "typeName": "西瓜"
        },
        {
          "fruitTypeId": 8,
          "typeName": "草莓"
        },
        {
          "fruitTypeId": 9,
          "typeName": "水蜜桃"
        },
        {
          "fruitTypeId": 10,
          "typeName": "李子"
        },
        {
          "fruitTypeId": 11,
          "typeName": "榴莲"
        },
        {
          "fruitTypeId": 12,
          "typeName": "蓝莓"
        },
        {
          "fruitTypeId": 13,
          "typeName": "柚子"
        },
        {
          "fruitTypeId": 14,
          "typeName": "木瓜"
        },
    
      ],
      fruitList: [{
          "name": "果唯伊水果",
          "list": [{
              "pkId": 1,
              "price": "5.8",
              "typeName": "苹果"
            },
            {
              "pkId": 2,
              "price": "2.08",
              "typeName": "香蕉"
            },
            {
              "pkId": 3,
              "price": "6.00",
              "typeName": "橙子"
            },
            {
              "pkId": 4,
              "price": "8.40",
              "typeName": "山竹"
            },
            {
              "pkId": 5,
              "price": "15",
              "typeName": "荔枝"
            },
            {
              "pkId": 6,
              "price": "5.8",
              "typeName": "芒果"
            },
            {
              "pkId": 7,
              "price": "2.10",
              "typeName": "西瓜"
            },
            {
              "pkId": 8,
              "price": "6.00",
              "typeName": "草莓"
            },
            {
              "pkId": 9,
              "price": "8.00",
              "typeName": "水蜜桃"
            },
            {
              "pkId": 10,
              "price": "7.80",
              "typeName": "李子"
            },
            {
              "pkId": 11,
              "price": "缺货",
              "typeName": "榴莲"
            },
            {
              "pkId": 12,
              "price": "4.08",
              "typeName": "蓝莓"
            },
            {
              "pkId": 13,
              "price": "2.80",
              "typeName": "柚子"
            },
            {
              "pkId": 14,
              "price": "8.00",
              "typeName": "木瓜"
            },
          ]
        },
        {
          "name": "恋果",
          "list": [{
              "pkId": 1,
              "price": "5.40",
              "typeName": "苹果"
            },
            {
              "pkId": 2,
              "price": "2.20",
              "typeName": "香蕉"
            },
            {
              "pkId": 3,
              "price": "缺货",
              "typeName": "橙子"
            },
            {
              "pkId": 4,
              "price": "9.00",
              "typeName": "山竹"
            },
            {
              "pkId": 5,
              "price": "14.00",
              "typeName": "荔枝"
            },
            {
              "pkId": 6,
              "price": "5.50",
              "typeName": "芒果"
            },
            {
              "pkId": 7,
              "price": "1.89",
              "typeName": "西瓜"
            },
            {
              "pkId": 8,
              "price": "6.35",
              "typeName": "草莓"
            },
            {
              "pkId": 9,
              "price": "8.20",
              "typeName": "水蜜桃"
            },
            {
              "pkId": 10,
              "price": "8.60",
              "typeName": "李子"
            },
            {
              "pkId": 11,
              "price": "24.60",
              "typeName": "榴莲"
            },
            {
              "pkId": 12,
              "price": "4.56",
              "typeName": "蓝莓"
            },
            {
              "pkId": 13,
              "price": "3.60",
              "typeName": "柚子"
            },
            {
              "pkId": 14,
              "price": "7.20",
              "typeName": "木瓜"
            },
    
          ],
    
        },
        {
          "name": "百果园",
          "list": [{
              "pkId": 1,
              "price": "6.10",
              "typeName": "苹果"
            },
            {
              "pkId": 2,
              "price": "2.30",
              "typeName": "香蕉"
            },
    
            {
              "pkId": 3,
              "price": "缺货",
              "typeName": "橙子"
            },
            {
              "pkId": 4,
              "price": "9.00",
              "typeName": "山竹"
            },
            {
              "pkId": 5,
              "price": "14.30",
              "typeName": "荔枝"
            },
            {
              "pkId": 6,
              "price": "5.65",
              "typeName": "芒果"
            },
            {
              "pkId": 7,
              "price": "2.08",
              "typeName": "西瓜"
            },
            {
              "pkId": 8,
              "price": "6.60",
              "typeName": "草莓"
            },
            {
              "pkId": 9,
              "price": "7.80",
              "typeName": "水蜜桃"
            },
            {
              "pkId": 10,
              "price": "8.2",
              "typeName": "李子"
            },
            {
              "pkId": 11,
              "price": "23.8",
              "typeName": "榴莲"
            },
            {
              "pkId": 12,
              "price": "4.36",
              "typeName": "蓝莓"
            },
            {
              "pkId": 13,
              "price": "3.20",
              "typeName": "柚子"
            },
            {
              "pkId": 14,
              "price": "8.00",
              "typeName": "木瓜"
            },
          ]
        },
        {
          "name": "鲜丰水果",
          "list": [{
              "pkId": 1,
              "price": "4.80",
              "typeName": "苹果"
            },
            {
              "pkId": 2,
              "price": "1.98",
              "typeName": "香蕉"
            },
    
            {
              "pkId": 3,
              "price": "5.20",
              "typeName": "橙子"
            },
            {
              "pkId": 4,
              "price": "8.25",
              "typeName": "山竹"
            },
            {
              "pkId": 5,
              "price": "缺货",
              "typeName": "荔枝"
            },
            {
              "pkId": 6,
              "price": "5.8",
              "typeName": "芒果"
            },
            {
              "pkId": 7,
              "price": "2.28",
              "typeName": "西瓜"
            },
            {
              "pkId": 8,
              "price": "6.40",
              "typeName": "草莓"
            },
            {
              "pkId": 9,
              "price": "8.60",
              "typeName": "水蜜桃"
            },
            {
              "pkId": 10,
              "price": "15",
              "typeName": "李子"
            },
            {
              "pkId": 11,
              "price": "29.6",
              "typeName": "榴莲"
            },
            {
              "pkId": 12,
              "price": "缺货",
              "typeName": "蓝莓"
            },
            {
              "pkId": 13,
              "price": "4.10",
              "typeName": "柚子"
            },
            {
              "pkId": 14,
              "price": "6.80",
              "typeName": "木瓜"
            },
          ]
        }
      ]

    (三)

    1.左侧固定

    2.右侧表格左右滚动

    3.td 单元格里面没有行 单纯放一条数据

    4.适合员工考勤表记录

    也是一样的表格,但是 数据格式不一样。结构和样式也不一样!这里要特别注意一下

    效果图

    (二)和(三) 的表格 怎么说数据格式不一样呢?看 js 数据结构 或者看两张图就知道了  图1循环的是列、图2循环的是行

    html 结构

    <view class='table'>
      <!-- 左侧固定 -->
      <view class='table_left_column'>
        <view class='left_col_item'>时间日期</view>
        <block wx:for="{{list}}" wx:for-index="index" wx:key="index">
          <view class='left_col_item'>{{item.date}}</view>
        </block>
      </view>
      <!-- 右侧表格滚动 -->
      <view class="table_right_scroll_box">
        <view class="table_tr_item">
          <view class="tr_td">姓名</view>
          <view class="tr_td">工号</view>
          <view class="tr_td">星期</view>
          <view class="tr_td">上班时间</view>
          <view class="tr_td">下班时间</view>
          <view class="tr_td">迟到</view>
          <view class="tr_td">早退</view>
          <view class="tr_td">备注</view>
        </view>
        <block wx:for="{{list}}" wx:for-index="index" wx:key="index">
          <view class='table_tr_item'>
            <view class='tr_td'>{{item.name}}</view>
            <view class='tr_td'>{{item.jobNumber}}</view>
            <view class='tr_td'>{{item.week}}</view>
            <view class='tr_td'>{{item.upTime}}</view>
            <view class='tr_td'>{{item.belowTime}}</view>
            <view class='tr_td' style="color: red;">{{item.lateTime}}</view>
            <view class='tr_td' style="color: red;">{{item.earlyTime}}</view>
            <view class='tr_td'>{{item.comment}}</view>
          </view>
        </block>
      </view>
    </view>

    css 样式

    page {
      background: #f3f3f3;
      font-size: 28rpx;
      font-weight: normal;
    }
    
    .table {
      display: flex;
      background: white;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-bottom: 0;
    }
    
    .table_left_column {
      width: 180rpx;
      height: auto;
      display: flex;
      flex-direction: column;
    }
    
    .left_col_item {
      width: 180rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-bottom: 1rpx solid #e5e5e5;
    }
    
    .table_right_scroll_box {
      white-space: nowrap;
      overflow-x: scroll;
      border-left: 1rpx solid #e5e5e5;
      font-weight: normal;
    }
    
    .table_tr_item {
      width: 1200rpx;
      display: flex;
      flex-direction: row;
      /* border: 1px solid red; */
    }
    
    .tr_td {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 150rpx;
      height: 60rpx;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-top: 0;
      border-left: 0;
      /* border-right: 0; */
    }
    

    js 数据结构

    list: [
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        },
    
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        },
    
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        },
    
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        }
    
      ]
    

    这里提一句~ 最主要是要清楚数据结构才好写样式~ 根据需求改吧!

    (四)

    1.固定表头和表格首列 右侧表格可以左右滚动

    2.是员工考勤表的升级版

    实现原理是使用 position: sticky;粘性定位固定首列和表头  因为表头和表格内容都是使用 scroll-view 滑动的 所以当右侧表格左右滚动时 js 监听scroll-view滚动事件 获取 scrollLeft 值后 设置表头scroll-view标签的scrollLeft 值 这样就能将表头和表格内容左右滑动的位置保持一致!

    上效果图

    html 结构

    <input style="width: 100%;height: 92rpx;border: 1rpx solid #ecf1f8;" auto-focus placeholder="请输入员工编号" />
    <button>查询</button>
    <view style="border: 1rpx solid #ecf1f8;border-bottom: 0;">
      <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}">
        <view class="table__head" catchtouchmove='catchTouchMove'>
          <view class="table__head__td" wx:for="{{headList}}" wx:key="attrIndex" wx:for-index="attrIndex" wx:for-item="attrItem">
            <text class="table__head__td__text">{{attrItem.title}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view scroll-y="true" class="table" style="height:{{totalHeight}}rpx;" bindscrolltolower="handleScrollToLower">
        <scroll-view scroll-x="true" bindscroll="scrollX">
          <view class="table__row" wx:for="{{list}}" wx:key="dataIndex" wx:for-index="dataIndex" wx:for-item="dataItem">
            <text class="table__row__td">{{dataItem.date}}</text>
            <text class="table__row__td">{{dataItem.name}}</text>
            <text class="table__row__td">{{dataItem.jobNumber}}</text>
            <text class="table__row__td">{{dataItem.week}}</text>
            <text class="table__row__td">{{dataItem.upTime}}</text>
            <text class="table__row__td">{{dataItem.belowTime}}</text>
            <text class="table__row__td" style="color: red;">{{dataItem.lateTime}}</text>
            <text class="table__row__td" style="color: red;">{{dataItem.earlyTime}}</text>
            <text class="table__row__td">{{dataItem.comment}}</text>
          </view>
        </scroll-view>
      </scroll-view>
    </view>

    css 样式

    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    .table__head{
      position: sticky;
      top: 0rpx;
      z-index: 100;
      width: 1380rpx;
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      white-space: nowrap;
      font-size: 24rpx;
      color: #aaabbd;
      border-bottom: 2rpx solid #ecf1f8;
      background-color: #fff;
    }
    .table__head__td{
      position: relative;
      width: 150rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      box-sizing: border-box;
      overflow: hidden;
      white-space: nowrap;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      /* border-right: 2rpx solid #ecf1f8; */
    }
    .table__head__td:nth-child(1) {
      width: 180rpx;
      position: sticky;
      z-index: 101;
      left: 0rpx;
    }
    .table__head__td__text{
      display: inline;
    }
    .table{
      display: block;
      position: relative;
      overflow: scroll;
      width: 100%;
      height: 100vh;
    }
    .table__row{
      width: 1380rpx;
      height: 60rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      white-space: nowrap;
      border-bottom: 2rpx solid #ecf1f8;
    }
    .table__row__td{
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      font-size: 26rpx;
      background-color: #fff;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      /* border-right: 2rpx solid #ecf1f8; */
    }
    .table__row__td:nth-child(1) {
      width: 180rpx;
      position: sticky;
      z-index: 10;
      left: 0;
    }
    

    js 数据结构

    
    Page({
      data: {
        headList: [
          { title: '时间日期' },
          { title: '姓名' },
          { title: '工号' },
          { title: '星期' },
          { title: '上班时间' },
          { title: '下班时间' },
          { title: '迟到' },
          { title: '早退' },
          { title: '备注' },
        ],
        scrollLeft: 0,
        totalHeight: 0,
        list: [
          {
            date:'2022-04-01',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期一',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-02',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期二',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-03',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期三',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-04',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期四',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-05',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期五',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-06',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期六',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-07',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期日',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'休息',
          },
      
          {
            date:'2022-04-01',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期一',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-02',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期二',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-03',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期三',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-04',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期四',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-05',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期五',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-06',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期六',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-07',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期日',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'休息',
          },
      
          {
            date:'2022-04-01',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期一',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-02',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期二',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-03',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期三',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-04',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期四',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-05',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期五',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-06',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期六',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-07',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期日',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'休息',
          },
      
          {
            date:'2022-04-01',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期一',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-02',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期二',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-03',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期三',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-04',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期四',
            upTime:'08:30:43',
            belowTime:'18:01:56',
            lateTime:'30:43',
            earlyTime:'',
            comment:'',
          },
          {
            date:'2022-04-05',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期五',
            upTime:'07:59:43',
            belowTime:'17:00:00',
            lateTime:'',
            earlyTime:'60:00',
            comment:'',
          },
          {
            date:'2022-04-06',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期六',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'调休',
          },
          {
            date:'2022-04-07',
            name:'李易峰',
            jobNumber:'0957',
            week:'星期日',
            upTime:'',
            belowTime:'',
            lateTime:'',
            earlyTime:'',
            comment:'休息',
          }
        ]
      },
      //禁止滚动
      catchTouchMove(){
        return false;
      },
      //监听左右滚动
      scrollX(e) {
        if(e.detail.scrollLeft > 0){
          this.setData({
            scrollLeft: e.detail.scrollLeft,
          });
        } else {
          this.setData({
            scrollLeft: 0,
          });
        }
      },
      //触底事件
      handleScrollToLower(e){
          if(e.detail.direction == 'bottom') {
            console.log('scroll-view触底事件在这里处理加载下一页数据')
          }
      },
      //页面加载时获取系统页面高度计算出表格高度
      onLoad() {
        wx.getSystemInfo({
          success:(res)=> {
            this.setData({
              totalHeight: res.windowHeight * 2 - 244
            })
          }
        })
      },
    
    })
    

    毕竟表头和内容是分开的两个scroll-view 不是同一个滑动 在真机操作下表头和内容还是有些对不上的,感觉表头反应慢些!能实现效果 就是体验感差点~_~ 

    (五)

    1.固定表头和表格首列 右侧表格可以左右滚动

    2.是员工考勤表的 最终版!!!

    position: sticky;粘性定位固定首列和表头  仅仅是使用一个 scroll-view 滑块就能实现表头和表格内容左右滑动保持一致!解决表头和内容对不上 表头反应慢问题!!!

    上效果图

    html 结构

    <view class="container">
      <view class="head__search">
        <view class="search__row">
          <icon class="icon-small" type="search" size="14"></icon>
          <input class="search__input" type="number" confirm-type="search" placeholder="请输入员工编号" />
        </view>
      </view>
      <view class="head___btn">
        <button type="primary">查询</button>
      </view>
      <view class="table__box">
        <scroll-view class="table__scroll" scroll-y scroll-x style="height:{{totalHeight}}px;" bindscrolltolower="handleScrollToLower">
          <view class="table__scroll__view">
            <view class="table__header">
              <view class="table__header__item" wx:for="{{headList}}" wx:key="index">{{item.title}}</view>
            </view>
            <view class="table__content">
              <view class="table__content__line" wx:for="{{list}}" wx:key="index" wx:for-item="dataItem">
                <view class="table__content__line__item">{{dataItem.date}}</view>
                <view class="table__content__line__item">{{dataItem.name}}</view>
                <view class="table__content__line__item">{{dataItem.jobNumber}}</view>
                <view class="table__content__line__item">{{dataItem.week}}</view>
                <view class="table__content__line__item">{{dataItem.upTime}}</view>
                <view class="table__content__line__item">{{dataItem.belowTime}}</view>
                <view class="table__content__line__item" style="color: red;">{{dataItem.lateTime}}</view>
                <view class="table__content__line__item" style="color: red;">{{dataItem.earlyTime}}</view>
                <view class="table__content__line__item">{{dataItem.comment}}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    css 样式  display: grid; 网格布局  grid-auto-flow 属性控制自动放置的项目如何插入网格中

    page {
      background-color: #f8f8f8;
    }
    
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    
    .container {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    
    .head__search {
      width: 100%;
      padding: 30rpx 30rpx;
      background-color: #f8f8f8;
      position: fixed;
      top: 0;
      z-index: 999;
    }
    
    .search__row {
      width: 100%;
      height: 70rpx;
      padding: 18rpx 0rpx 18rpx 24rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border: 1rpx solid #E4E4E4;
      border-width: thin;
    }
    
    .search__input {
      width: 100%;
      margin-left: 20rpx;
      font-size: 26rpx;
      font-family: PingFang;
      font-weight: 500;
    }
    
    .head___btn {
      width: 100%;
      height: 90rpx;
      position: fixed;
      top: 125rpx;
      z-index: 999;
    }
    
    .table__box {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      position: relative;
      top: 230rpx;
      z-index: 999;
      border: 1px solid #E4E4E4;
    }
    
    .table__scroll {
      overflow: hidden;
      background: #FFF;
    }
    
    .table__header {
      width: 1380rpx;
      position: sticky;
      top: 0;
      z-index: 999;
      display: grid;  /* display: grid; 网格布局 */
      /* grid-auto-flow 属性控制自动放置的项目如何插入网格中 */
      /* column	通过填充每一列来放置项目 */
      grid-auto-flow: column;
      font-size: 26rpx;
      font-weight: bold;
      color: #333333;
      background: #F4F6FF;
    }
    
    .table__header__item {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      background: #F4F6FF;
      width: 150rpx;
      height: 60rpx;
      position: relative;
      z-index: 888;
      border: 1rpx solid #E4E4E4;
      border-left: 0;
      border-top: 0;
    }
    
    .table__header__item:nth-child(1) {
      width: 180rpx;
      position: sticky;
      left: 0;
      z-index: 999;
    }
    
    .table__content {
      background-color: #fff;
      /* 这是兼容 iPhone x */
      /* padding-bottom: 10rpx; */
      /* margin-bottom: constant(safe-area-inset-bottom); */
      /* margin-bottom: env(safe-area-inset-bottom); */
    }
    
    .table__content__line {
      width: 1380rpx;
      display: grid;
      grid-auto-flow: column;
      position: relative;
    }
    
    .table__content__line__item {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      background-color: #fff;
      width: 150rpx;
      height: 60rpx;
      border: 1rpx solid #E4E4E4;
      border-left: 0;
      border-top: 0;
      font-size: 26rpx;
    }
    
    .table__content__line__item:nth-child(1) {
      width: 180rpx;
      position: sticky;
      left: 0;
    }

    js 数据结构

    // pages/test3/index.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        totalHeight:0,
        headList: [
          { title: '时间日期' },
          { title: '姓名' },
          { title: '工号' },
          { title: '星期' },
          { title: '上班时间' },
          { title: '下班时间' },
          { title: '迟到' },
          { title: '早退' },
          { title: '备注' },
        ],
        list: [
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        },
    
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        },
    
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        },
    
        {
          date:'2022-04-01',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期一',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-02',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期二',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-03',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期三',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-04',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期四',
          upTime:'08:30:43',
          belowTime:'18:01:56',
          lateTime:'30:43',
          earlyTime:'',
          comment:'',
        },
        {
          date:'2022-04-05',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期五',
          upTime:'07:59:43',
          belowTime:'17:00:00',
          lateTime:'',
          earlyTime:'60:00',
          comment:'',
        },
        {
          date:'2022-04-06',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期六',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'调休',
        },
        {
          date:'2022-04-07',
          name:'李易峰',
          jobNumber:'0957',
          week:'星期日',
          upTime:'',
          belowTime:'',
          lateTime:'',
          earlyTime:'',
          comment:'休息',
        }
    
      ]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        wx.getSystemInfo({
          success:(res)=> {
            this.setData({
              // totalHeight: (res.windowHeight * 2) - 240
              totalHeight: res.windowHeight - 120
            })
          }
        })
      },
      // 触底事件
      handleScrollToLower(e){
          if(e.detail.direction == 'bottom') {
            console.log('scroll-view触底事件在这里处理加载下一页数据')
          }
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    注意:

    css类名不要这样写 (table-header)因为在微信开发者工具里面 快捷键Ctrl + Alt 鼠标箭头指向类名无法选中,自然就跳转不了对应的css样式  应该使用下划线__(table__header)这样也行(table_header)好看整洁!最重要的是能选中样式名称跳转到对应的css样式,以便查看和修改!

    我还有一篇文章是根据pc端窗口写的数据表格,有兴趣可以去看看

    https://blog.csdn.net/m0_61073617/article/details/124213563

    展开全文
  • 微信小程序table表格自定义组件实现

    千次阅读 多人点赞 2020-10-22 17:16:22
    效果 属性 属性 类型 默认值 必填 说明 tabData Array ...表格标题 ...表格中需要展示的数据列 onclick Boolean false 否 为某一列设置点击事件,若同时为多列设置了点击事件,则只有第一个生效

    效果

        1. 左图是多列并且给了最大高度的效果。
        2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果。
        3. 在不为某列设置固定宽度的情况下,四列及四列以下均是平分屏幕宽度的,并且不能左右滑动。

    属性

    属性类型默认值必填说明
    tabDataArray[ ]数据源
    columnsArray[ ]数据列
    settingObject{ }自定义样式配置项

    columns

    属性类型默认值必填说明
    labelString表格标题
    propArray表格中需要展示的数据列
    onclickBooleanfalse为某一列设置点击事件,若同时为多列设置了点击事件,则只有第一个生效
    fontSizeNumber24某一列的字体大小,单位:rpx
    fontWeightNumber / Stringnormal某一列的字重(粗细),支持 css 的所有属性值
    textDecorationStringnone某一列的文本修饰,支持 css 的所有属性值
    colorString某一列的字体颜色,支持十六进制、RGB、RGBA、英文单词

    setting

    属性类型默认值必填说明
    tableOutBorderString表格外边框,支持三值写法,例如:2rpx solid #ebeef5
    tableInBorderString表格内边框,支持三值写法,例如:2rpx solid #ebeef5
    tableInBorderLevelBooleanfalse表格内是否只显示水平边框
    tableRadiusString表格圆角
    theadHeightString表格标题的高度
    theadAlignStringleft表格标题的字体对齐方式,值:left、center、right
    theadColorString表格标题的字体颜色,支持十六进制、英文单词
    theadBgColorString表格标题的背景颜色,支持十六进制、RGB、RGBA、英文单词
    theadFontSizeNumber24表格标题的字体大小,单位:rpx
    theadFontWeightNumber / Stringbold表格标题的字重(粗细),支持 css 的所有属性值
    tbodyHeightString表格体的高度, 用于垂直滚动
    tbodyAlignStringleft表格体的字体对齐方式,值:left、center、right
    tbodyColorString表格体的的字体颜色,支持十六进制、英文单词
    tbodyBgColorString表格体的背景颜色,支持十六进制、RGB、RGBA、英文单词
    tbodyFontSizeNumber24表格体的字体大小,单位:rpx
    tbodyFontWeightNumber / Stringnormal表格体的字重(粗细),支持 css 的所有属性值
    trHeightString表格体的行的高度
    stripeString表格体的斑马纹背景色,支持十六进制、RGB、RGBA、英文单词

    子组件WXML

    <wxs src="./index.wxs" module="filter" />
    <view class="container">
      <view class="table"
            style="width:{{headWidth}};border-radius: {{config.tableRadius}}rpx;border:{{config.tableOutBorder}};border-bottom:{{config.tableOutBorder=='none'?(!!config.tableInBorder?config.tableInBorder:'2rpx solid #ebeef5'):''}};">
        <view class="thead" style="min-height:{{config.theadHeight}}rpx;background:{{config.theadBgColor}};">
          <view class="th"
                wx:for="{{column}}"
                wx:key="index"
                style="flex-grow:0;flex-basis:{{headWidth=='100%'?(100/column.length)+'%':item.width+'rpx'}};color:{{config.theadColor}};font-size:{{config.theadFontSize}}rpx;font-weight:{{config.theadFontWeight}};border-right:{{index==(column.length - 1)?'none':(config.tableInBorderLevel?'none':config.tableInBorder)}};border-bottom:{{config.tableInBorder}};">
            <view class="txt" style="text-align:{{config.theadAlign}};">{{item.label}}</view>
          </view>
        </view>
        <scroll-view scroll-y wx:if="{{tabData.length > 0}}" style="max-height:{{config.tbodyHeight}}rpx;">
          <view class="tr"
                wx:for="{{tabData}}"
                wx:for-item="item"
                wx:key="index"
                style="min-height:{{config.trHeight}}rpx;background:{{config.tbodyBgColor}};">
            <view class="td"
                  wx:for="{{column}}"
                  wx:for-item="col"
                  wx:for-index="colIndex"
                  wx:key="colIndex"
                  style="flex-grow:0;flex-basis:{{headWidth=='100%'?(100/column.length)+'%':col.width+'rpx'}};background:{{index%2!=0?config.stripe:''}};color:{{config.tbodyColor}};font-size:{{config.tbodyFontSize}}rpx;font-weight:{{config.tbodyFontWeight}};border-right:{{colIndex==(column.length - 1)?'none':(config.tableInBorderLevel?'none':config.tableInBorder)}};border-bottom:{{index==tabData.length-1?'none':config.tableInBorder}};">
              <view class="txt"
              		data-value="{{item}}"
                    bindtap="{{(col.οnclick==true||col.οnclick=='true')?'btnAction':''}}"
              		style="text-align:{{config.tbodyAlign}};font-size:{{col.fontSize}}rpx;font-weight:{{col.fontWeight}};text-decoration:{{col.textDecoration}};color:{{col.color}};">
                <block wx:if="{{!!col.type}}">{{filter[col.type](item[col.prop], col.param)}}</block>
                <block wx:else>{{item[col.prop]}}</block>
              </view>
            </view>
          </view>
        </scroll-view>
        <view wx:if="{{tabData.length === 0}}" class="msg">
          <view>暂无数据~</view>
        </view>
      </view>
    </view>
    

    子组件JS

    Component({
      data: {
        headWidth: null, // 设置表格的整体宽度,用于水平滚动
        column: [], // 表头标题
        config: { // 表格自定义样式设置
          tableOutBorder: '', // 表格的表框
          tableInBorder: '', // 表格的表框
          tableInBorderLevel: false, // 表格内只显示水平边框
          tableRadius: '', // 表格圆角
          theadHeight: '', // 表头的高度
          theadAlign: '', // 表头的字体对齐
          theadColor: '', // 表头的字体颜色
          theadBgColor: '', // 表头的背景色
          theadFontSize: '', // 表头的字体大小
          theadFontWeight: '', // 表头的字体粗细
          tbodyHeight: '', // 表格 tbody 的高度, 用于垂直滚动
          tbodyAlign: '', // 表格行的字体对齐方式
          tbodyColor: '', // 表格行的字体颜色
          tbodyBgColor: '', // 表格行的背景色
          tbodyFontSize: '', // 表格行的字体大小
          tbodyFontWeight: '', // 表格行的字体粗细
          trHeight: '', // 表格行 tr 的高度
          stripe: '' // 表格的斑马纹背景色
        }
      },
      properties: {
        tabData: { // 父组件传入的表格数据
          type: Array,
          value: []
        },
        columns: { // 父组件传入的表头标题
          type: Array,
          value: []
        },
        setting: { // 父组件传入的表格自定义样式
          type: Object,
          value: {}
        }
      },
      observers: {
        'tabData'(val) {
          // console.log('tableData', val)
        },
        'columns'(val) {
          if(val.length !== 0) {
            let width = 0
            let num = 0
            val.forEach((item)=>{
              // 判断是否设置了列宽,没有的话赋值默认的宽度 186,单位rpx
              if(!!item.width) {
                width += item.width/1
              } else {
                item.width = 186
                width = width + 186
              }
              // 如果给多列添加了点击事件,则第一个绑定了点击事件的列生效
              if(!!item.onclick && (item.onclick == true || item.onclick == 'true')) {
                num++
                if(num > 1) {
                  item.onclick = false
                }
              }
            })
            // 判断table的宽度是否超出屏幕的宽度,超出则赋值固定的宽度,否则赋值百分比
            if(width < 750) {
              width = '100%'
            } else {
              width = width + 'rpx'
            }
            this.setData({
              column: val,
              headWidth: width
            })
          }
        },
        'setting'(val) {
          // 判断传入的表格设置项是否为空
          if (Object.keys(val).length !== 0) {
            for (let key in val) {
              let str = null
              if(key == 'tableInBorderLevel' && (val[key] == true || val[key] == 'true')) {
                str = true
              } else if(key == 'tableInBorderLevel') {
                str = false
              } else {
                str = String(val[key]).replace(/(^\s*)|(\s*$)/g, '')
              }
              if(str != '' && str != null && str != 'null' && str != undefined && str != 'undefined') {
                this.data.config[key] = str
              }
            }
            this.setData({
              config: this.data.config
            })
          }
        }
      },
      methods: {
        // 表格某行的点击事件
        btnAction: function(e) {
          let value = e.currentTarget.dataset.value // value:一个包含点击行所有数据的对象
          this.triggerEvent("getCurrentValue", value)
        }
      }
    })
    

    子组件WXS

        内含格式化时间、价格、百分比的方法

    // 格式化时间
    function time(val, option) {
      var date = getDate(val)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var week = date.getDay()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      
      //获取 年月日
      if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')
    
      //获取 年月
      if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')
    
      //获取 年
      if (option == 'YY') return [year].map(formatNumber).toString()
    
      //获取 月
      if (option == 'MM') return  [mont].map(formatNumber).toString()
    
      //获取 日
      if (option == 'DD') return [day].map(formatNumber).toString()
    
      //获取 年月日 周一 至 周日
      if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    
      //获取 月日 周一 至 周日
      if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    
      //获取 周一 至 周日
      if (option == 'Week')  return getWeek(week)
    
      //获取 时分秒
      if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')
    
      //获取 时分
      if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')
    
      //获取 分秒
      if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')
    
      //获取 时
      if (option == 'hh')  return [hour].map(formatNumber).toString()
    
      //获取 分
      if (option == 'mm')  return [minute].map(formatNumber).toString()
    
      //获取 秒
      if (option == 'ss') return [second].map(formatNumber).toString()
    
      //默认 年月日 时分秒 
      return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    
    function formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    
    function getWeek(n) {
      switch(n) {
        case 1:
          return '星期一'
        case 2:
          return '星期二'
        case 3:
          return '星期三'
        case 4:
          return '星期四'
        case 5:
          return '星期五'
        case 6:
          return '星期六'
        case 7:
          return '星期日'
      }
    }
    // 格式化价格
    function price(val, option) {
      var option = option || 0
       // 不是数字返回空
       if(val != null && val != '' && isNaN(val/1)) {
        return ''
      }
      if(!!val && val != 'null' && val != 'undefined') {
        return val.toFixed(option)
      }
      return ''
    }
    // 格式化百分比
    function percent(val) {
      // 不是数字返回空
      if(val != null && val != '' && isNaN(val/1)) {
        return ''
      }
      // 如果值小于万分位(小于 0.01%)则返回 0%
      if(val < 0.0001) {
        return '0%'
      }
      // 小数 *100 后不包含小数点,返回 *100 后的结果
      if(val >= 0.0001 && ((val * 100) + '').indexOf('.') == -1) {
        return (val * 100) + '%'
      }
      // 有些小数 *100 之后会出现很长的位数,比如0.07*100=0.000000000001
      // 先处理成数组再截取 arr[1] 的前两个字符判断是否等于0,等于 0 返回 arr[0],不等于 0 则保留两位小数
      if(val >= 0.0001 && ((val * 100) + '').indexOf('.') > -1) {
        if((val * 100 + '').split('.')[1].slice(0,2) == 0){
          return (val * 100 + '').split('.')[0] + '%'
        }
        return (val * 100).toFixed(2) / 1 + '%'
      }
    }
    
    module.exports.time = time;
    module.exports.price = price;
    module.exports.percent = percent;
    

    子组件JSON

    {
      "component": true
    }
    

    子组件WXSS

    .container {
      overflow-x: scroll;
    }
    .table {
      border: 2rpx solid #ebeef5;
      border-bottom: 2rpx solid #ebeef5;
      border-radius: 0;
      box-sizing: border-box;
      background: #fff;
      font-size: 24rpx;
      color: #606266;
      overflow: hidden;
    }
    /* 表头 */
    .thead {
      display: flex;
    }
    .th {
      padding: 10rpx 20rpx;
      border-right: 2rpx solid #ebeef5;
      border-bottom: 2rpx solid #ebeef5;
      display: flex;
      align-items: center;
    }
    .th .txt {
      font-weight: bold;
      text-align: left;
    }
    .tr {
      display: flex;
    }
    .td {
      padding: 10rpx 20rpx;
      border-right: 2rpx solid #ebeef5;
      border-bottom: 2rpx solid #ebeef5;
      display: flex;
      align-items: center;
    }
    .td .txt {
      text-align: left;
      font-weight: normal;
    }
    .msg {
      width: 750rpx;
      height: 240rpx;
      line-height: 240rpx;
      font-size: 26rpx;
      text-align: center;
    }
    /* 隐藏表格滚动条 */
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    

    父组件WXML

    <view class="container">
      <view class="table">
        <table tabData="{{tabData}}"
        	   columns="{{columns}}"
        	   setting="{{setting}}"
        	   bind:getCurrentValue="getCurrentValue">
         </table>
      </view>
    </view>
    

    父组件JS

    Page({
      data: {
        // 表格数据
        tabData: [
          { 
            id: 1,
            name: '上官婉儿',
            location: '法师 / 刺客',
            specialty: '爆发 / 突进',
            skill: '笔阵 / 篆法·疾势 / 飞白·藏锋 / 章草·横鳞',
            price: 13888,
            showUpRate: 0.001,
            shelveTime: 1545062400000
          },
          {
            id: 2,
            name: '王昭君',
            location: '法师',
            specialty: '控制 / 冰冻',
            skill: '冰封之心 / 凋零冰晶 / 禁锢寒霜 / 凛冬已至',
            price: 8888,
            showUpRate: 0.01,
            shelveTime: 1445270400000
          },
          { 
            id: 3,
            name: '老夫子',
            location: '战士',
            specialty: '突进',
            skill: '师道尊严 / 圣人训诫 / 举一反三 / 圣人之威',
            price: 8888,
            showUpRate: 0.0003,
            shelveTime: 1445270400000
          },
          { 
            id: 4,
            name: '狄仁杰',
            location: '射手',
            specialty: '',
            skill: '迅捷 / 六令追凶 / 逃脱 / 王朝密令',
            price: 8888,
            showUpRate: 0.06,
            shelveTime: 1445270400000
          },
          { 
            id: 5,
            name: '墨子',
            location: '法师 / 战士',
            specialty: '控制 / 护盾',
            skill: '兼爱非攻 / 和平漫步 / 机关重炮  /墨守成规',
            price: 8888,
            showUpRate: 0.005,
            shelveTime: 1445270400000
          },
          { 
            id: 6,
            name: '盘古',
            location: '战士',
            specialty: '突进 / 收割',
            skill: '盘古斧 / 狂怒突袭 / 压制之握 / 开天辟地 / 聚合为一',
            price: 13888,
            showUpRate: 0.00001,
            shelveTime: 1550764800000
          },
          { 
            id: 7,
            name: '猪八戒',
            location: '坦克',
            specialty: '团控 / 回复',
            skill: '毫发无伤 / 肉弹蹦床 / 倒打一耙 / 圈养时刻',
            price: 13888,
            showUpRate: 0.4,
            shelveTime: 1548777600000
          },
          { 
            id: 8,
            name: '伽罗',
            location: '射手',
            specialty: '远程消耗 / 团队',
            skill: '破魔之箭 / 渡灵之箭 / 静默之箭 / 纯净之域',
            price: 13888,
            showUpRate: 0.8,
            shelveTime: 1537977600000
          },
          {
            id: 9,
            name: '李信',
            location: '战士',
            specialty: '突进 / 团控',
            skill: '灰暗利刃 / 急速突进 / 强力斩击 / 力量觉醒·光 / 力量觉醒·暗',
            price: 13888,
            showUpRate: 0.07,
            shelveTime: 1542816000000
          },
          { 
            id: 10,
            name: '云中君',
            location: '刺客 / 战士',
            specialty: '突进 / 收割',
            skill: '云间游 / 天隙鸣 / 若英·华彩 / 风雷引',
            price: 13888,
            showUpRate: 0.006,
            shelveTime: 1557504000000
          },
          { 
            id: 11,
            name: '瑶',
            location: '辅助',
            specialty: '团队增益',
            skill: '山鬼·白鹿 / 若有人兮 / 风飒木萧 / 独立兮山之上',
            price: 13888,
            showUpRate: 0.9,
            shelveTime: 1555344000000
          },
          {
            id: 12,
            name: '米莱狄',
            location: '法师',
            specialty: '持续输出 / 推进',
            skill: '机械仆从 / 空中力量 / 强制入侵 / 浩劫磁场',
            price: 13888,
            showUpRate: 0.8,
            shelveTime: 1526313600000
          },
          { 
            id: 13,
            name: '狂铁',
            location: '战士',
            specialty: '突进 / 团控',
            skill: '无畏战车 / 碎裂之刃 / 强袭风暴 / 力场压制',
            price: 13888,
            showUpRate: 0.09,
            shelveTime: 1524153600000
          },
          { 
            id: 14,
            name: '斐擒虎',
            location: '刺客 / 战士',
            specialty: '远程消耗 / 收割',
            skill: '寸劲 / 冲拳式 / 气守式 / 虎啸风生',
            price: 13888,
            showUpRate: 0.007,
            shelveTime: 1519747200000
          },
          { 
            id: 15,
            name: '明世隐',
            location: '辅助',
            specialty: '团队增益',
            skill: '大吉大利 / 临卦·无忧 / 师卦·飞翼 / 泰卦·长生',
            price: 13888,
            showUpRate: 0.06,
            shelveTime: 1513094400000
          }
        ],
        // 表格标题列
        columns: [
          { label: '英雄名称', prop: 'name', onclick: true, fontSize: '',fontWeight: 600, textDecoration: 'underline', color: '#000'},
          { label: '英雄定位', prop: 'location'},
          { label: '英雄特长', prop: 'specialty'},
          { label: '英雄技能', prop: 'skill', width: 700, fontSize: '', fontWeight: 400, textDecoration: '', color: ''},
          { label: '英雄价格', prop: 'price', type: 'price'},
          { label: '出场率', prop: 'showUpRate', type: 'percent'},
          { label: '上架时间', prop: 'shelveTime', type: 'time', param: 'YY-MM-DD'}
        ],
        // 自定义样式配置项
        setting: {
          tableRadius: 0, // 表格圆角
          tableOutBorder: '', // 表格外边框
          tableInBorder: '', // 表格内边框
          tableInBorderLevel: 'true', // 表格内只显示水平边框
          theadHeight: 70, // 表头的高度
          theadAlign: '', // 表头的字体对齐方式
          theadColor: '', // 表头的字体颜色
          theadBgColor: '', // 表头的背景色
          theadFontSize: '', // 表头的字体大小
          theadFontWeight: '', // 表头的字体粗细
          tbodyHeight: '600',  // 表格 tbody 的高度, 用于垂直滚动
          tbodyAlign: '', // 表格行的的字体对齐方式
          tbodyColor: '', // 表格行的字体颜色
          tbodyBgColor: '', // 表格行的背景色
          tbodyFontSize: '', // 表格行的字体大小
          tbodyFontWeight: '', // 表格行的字体粗细
          trHeight: 70, // 表格行 tr 的高度
          stripe: '#fdf5e6' // #fafafa #f5f5f5 #fdf5e6 #fff8dc #f0f9eb
        }
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
      // 表格的自定义点击事件
      getCurrentValue(e) {
        const { name } = e.detail
        wx.showToast({
          title: name,
          icon: 'none',
          duration: 1500
        })
      }
    })
    

    父组件JSON

    {
      "navigationBarTitleText": "搜索",
      "usingComponents": {
        "table": "../../components/table/index"
      }
    }
    

    父组件WXSS

    page {
      background: #fff;
    }
    .container {
      width: 100%;
    }
    .table {
      width: 100%;
      margin: 0 auto 30rpx;
    }
    
    展开全文
  • 本文实例为大家分享了微信小程序制作表格的具体代码。 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码 <view class=table> ...
  • 微信小程序使用table表格

    千次阅读 2022-02-18 17:18:49
    但是小程序没有table标签 不能使用合并行合并列 找了很多发现小程序中有一个标签和 VUE中的 v-html是一样的功能 <rich-text nodes="{{tableHtml}}"></rich-text> rich-text标签可以渲染html代码,这样...
  • 小程序表组件微信小程序...某些行被点击时会触发对外事件快速上手一个很简单的微信小程序table组件诞生了。使用很简单,就是按照npm包和微信自定组件的用法使用。1,安装和约会安装组件: npm install --save miniprogr
  • 微信小程序Table表格

    千次阅读 2019-08-30 10:49:08
    实现效果:表格头部固定,表格内容数据可以滚动 ...view class="table"> <view class="tr"> <view class="td">序号</view> <view class="td">唯一XX</view> <...
  • 大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了。 效果图: 代码挺简单方便的: wxml: <view class='history-table-wrap'> <view class=table> 日期 时间 ...
  • 微信小程序table

    千次阅读 2019-09-18 10:49:07
    微信小程序table 前言项目目录![在这里插入图片描述](https://img-blog.csdnimg.cn/20190918105247616.png)table实现运行效果 前言 项目需要所以需要研究一下微信小程序,昨天下午看了两个小时,把编译的工具什么都...
  • 微信原生小程序Table表格组件 开发微信小程序过程中不可避免的会使需要展示表单数据。 找遍了各大组件库没有合适的,分享一个的微信小程序Table组件。 Gitee:https://gitee.com/boriska/table-build.git GitHub:...
  • 针对上期打卡需求开发,这期需要以列表的形式展现打卡记录,但是微信小程序并没有表格组件,可能是官方考虑到,在前端开发中,表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用,针对这个问题,...
  • 主要介绍了微信小程序实现横向增长表格的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序 表格

    2021-01-27 09:48:31
    mini-program-table微信小程序 表格实现功能:�固定表头固定表格中首列内容可滚动列宽自适应
  • table.wxml <scroll-view scroll-x="true"> <view class="table"> <view class="tr"> <block wx:for="{{columns}}" wx:key="index"> <view class="th tw{{item.cwidth}} t{{item.t2...
  • 本文实例讲述了微信小程序实现用table显示数据库反馈的多条数据功能。...解决了微信小程序自定义表格,并显示的多条数据的问题。 index.wxml 我的调查问卷 <view class=table> 姓名 性别</
  • 微信小程序不支持 table 标签,所以自己写了一个,记录一下方便以后可以直接复制使用 图片,可以自己修改样式 index.js,也就是数据,这里写死,可以字自己对接口 ** [ ] index.wxml,显示页面 <!--pages/...
  • 本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下 效果图: wxml <view class=table> <view class=th>SPB <view class=th>DPB 日期 [code]}> <view
  • 参考资料: https://www.jb51.net/article/156283.htm
  • WxTreeTable 这是一个微信小程序的无限级下拉表格
  • 微信小程序渲染html 支持的特性: 大部分的普通HTML标签(未全部测试) , <video>, <audio> <table>, , , 等表格标签 标签转`` HTML entities 七牛图片裁剪 自定义插件 不支持<form>, ,等表单元素...
  • 表格布局: <view class="table"> <view class="tr"> <view class="th">head1</view> <view class="th">head2</view> <view class="th ">head3</view> </view&...
  • 1、用DIV+CSS编写出来的文件k数比用table写出来的要,不信你在页面中放1000个table和1000个div比比看哪个文件大 2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,810
精华内容 1,924
关键字:

微信小程序table表格