Java 企业微信发送markdown 表格企业微信打开表格

转载

mob64ca1413c518 2023-12-10 09:09:54

文章标签 微信小程序 Text 微信 css 文章分类 Java 后端开发

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

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

先上效果图（mock数据）

Java 企业微信发送markdown 表格企业微信打开表格_Text

小程序是没有原生 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表格随着浏览器窗口大小自适应改变大小，如果不想自适应，屏幕小出现滚动条可以左右滑动的情况，屏幕大的时候表格内容居中显示，两边留白。那么列的宽度就不要写百分比%，直接写数值。先看效果图

Java 企业微信发送markdown 表格企业微信打开表格_微信_02

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;
}

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

Java 企业微信发送markdown 表格企业微信打开表格_css_03

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 表格，可以固定表头和表格首列右侧表格可以左右滚动，（多种表格示例）有兴趣可以去看看

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。