微信小程序 table表格 PC版本

已于 2022-05-03 17:55:08 修改
阅读量3.4k 收藏 16
点赞数 3
分类专栏： 微信小程序 文章标签： 微信小程序
于 2022-04-16 17:50:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61073617/article/details/124213563
版权

公司项目啊....其实小程序页面的商品列表也有宫格、列表、大图模式了，尽管描述得不那么详细，但是信息量也能看到个大概，但是领导或业务员比较喜欢看表格详细点，罗列得比较清晰。 所以要求可以通过小程序分享到微信，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

m0_61073617
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序原生实现无边框table组件支持横向和纵向滚动
badoldboy的博客
08-01 2420
wxml文件-- 表格 -- > < view class = "table" > <!-- 整体横向滑动 -- > < scroll - view class = "tableX" scroll - x > <!
微信小程序原生实现table组件, 第二弹，支持横向和纵向滚动（固定列，可设置边框）
badoldboy的博客
02-05 1176
在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5e6cb1a645584c9dbf27b6bd1ab9465e.png。
微信小程序table表格自定义组件实现
热门推荐
关注最新技术问题并持续维护更新
10-22 1万+
效果 属性 属性 类型 默认值 必填 说明 tabData Array [ ] 否 数据源 columns Array [ ] 是 数据列 setting Object { } 否 自定义样式配置项 columns 属性 类型 默认值 必填 说明 label String 是 表格标题 prop Array 是 表格中需要展示的数据列 onclick Boolean false 否 为某一列设置点击事件，若同时为多列设置了点击事件，则只有第一个生效
uniapp、微信小程序--自定义table
lingrer的博客
11-29 1002
最开始是用Uview写的表格 但是发现属性太少了，首先就是不能取消横竖边框，最后就是没有办法改变每一行的背景颜色，他只有th-style改变表头的背景颜色。然后我选择用uni-ui的表格组件，发现他可以取消竖的边框 但是还是不能改变每一行的背景颜色，使用deep穿透也不行，最后采用view原生写法。啥先不说直接看效果吧。
微信小程序实现简易table表格
10-17
主要为大家详细介绍了微信小程序实现简易table表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序表格组件(锁头、锁列、样式、字体颜色等)
最新发布
小风才子的博客
03-15 2417
实现微信小程序的锁头所列表格，并加入样式特性
微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动
qq_36158551的博客
10-04 4053
1.左侧一列固定不动2.右侧表格内容可以左右滚动3.单元格内容平均分配4.每一行行高可以由内容撑开 通过 js 设置左侧一列行高与右侧表格内容行高保持一致。
微信小程序中使用table
Hassan的小博客!
02-03 5047
小程序中使用table
微信小程序入门四：实现table效果
07-29
微信小程序入门四：实现table效果 微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
微信小程序实现的绘制table表格功能示例
10-17
在微信小程序中，绘制table表格是一项常见的需求，用于展示数据或进行数据分析。下面将详细介绍如何在微信小程序中实现这一功能，以及涉及到的数据读取和界面布局相关操作。 首先，我们需要理解微信小程序的基本...
微信小程序开发表格demo
03-08
小程序开发表格demo，### wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
微信小程序实现简单表格
10-17
主要介绍了微信小程序实现简单表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序如何自定义table组件
12-03
背景 最近想要捣鼓一个自己的小程序，其中数据展示部分比较多，想用table来做展示，但是微信小程序并没有table组件，于是就自己动手捣鼓了一个，勉强能用。 可以看看效果： etable使用介绍 etable的使用很简单，分为 引入、使用、配置等3个阶段 1、引入 首先在要使用的页面中的json文件中配置如下： { "usingComponents": { "etable" : "/compenents/etable/etable" } } 2、使用 在wxml页面需要用到的地方使用，如下： <etable
微信小程序表格合并demo
11-21
在这个“微信小程序表格合并demo”中，我们可以学习到如何在微信小程序中实现表格的合并功能，这对于创建数据展示或者用户交互界面来说是非常重要的。 首先，我们要了解的是`index.js`文件，这是小程序的逻辑层，它...
微信小程序手写table表格
zybijiso666的博客
11-15 939
wxss:想加其他样式得可以自己+总结：有循环的可以自己填写数据。
微信小程序表格组件--固定表头、自适应列宽、单元格点击事件支持、斑马线样式
qq_44722452的博客
02-25 3007
一个具有固定表头、自适应列宽、单元格点击事件支持、可滚动表格内容、和斑马线样式的微信小程序表格组件。
小程序 table组件
weixin_67585820的博客
03-28 8858
满足基本需求，可自定义数据，左右滑动，自定义样式， 后面还会加新的内容
微信小程序实现 table 表格勾选
09-01
微信小程序实现 table 表格勾选，可以通过以下步骤实现： 1. 在前端页面中，使用 `<table>` 标签创建表格结构，设置合适的样式和布局。 2. 在表格的表头中，添加一个全选的复选框，用于全选或取消全选所有的表格行。同时，为每个表格行添加一个复选框，用于单独选择当前行。 3. 在小程序的 data 数据中定义一个变量，如 `selectedList`，用于记录所有已选择的表格行的索引。 4. 在复选框的选中状态改变事件中，通过事件对象获取当前复选框所在的表格行索引，根据选中状态来判断是否将该行的索引添加到 `selectedList` 中或从中删除。 5. 在全选复选框的选中状态改变事件中，根据选中状态来决定是将所有表格行的索引添加到 `selectedList` 中还是清空 `selectedList`。 6. 在表格行的渲染循环中，根据当前行的索引判断是否选中，将对应的复选框的选中状态绑定到 `selectedList` 中的索引是否存在于 `selectedList` 中。 7. 可以根据已选择的表格行的索引，在其他地方进行进一步处理，如显示选中行的详细信息，进行操作等。 通过以上步骤，我们可以在微信小程序中实现 table 表格的勾选功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值