uni-app uView Ui Table 合并单元格

最新推荐文章于 2025-03-10 14:49:12 发布

aibujin

最新推荐文章于 2025-03-10 14:49:12 发布

阅读量1.9w

点赞数 3

分类专栏： vue vis 文章标签： uni-app vue

本文链接：https://blog.csdn.net/aibujin/article/details/116705963

版权

vue vis 专栏收录该内容

5 篇文章

订阅专栏

Table 表格

本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成

table 组件裹在最外层，可以配置一些基础参数

tr 组件用于显示"行"数据

th 组件用于显示表头内容，类似td，不同之处在于字体加粗了，也带有背景颜色，也可以直接用td替代th

td组件不是最小单位，为了合并单元格时，内部可以嵌入 tr 和 td 组件

效果图

在这里插入图片描述

Template 文件

<view class="table_box">
	<u-table>
                 <u-tr>
			<u-td width="25%">车辆种类</u-td>
			<u-td width="75%" class="box_br box_pd">
				<u-td width="80%" class="box_cus">月折旧系数</u-td>
                         <u-tr>
                         	<u-td class="box_bt">家庭自用</u-td>
                         	<u-td class="box_bt">非营业</u-td>
					<u-td width="50%" class="box_bt box_pd box_br">
						<u-td class="box_cus">营业</u-td>
						<u-tr >
							<u-td class="box_bt box_cus">1.10%</u-td>
							<u-td class="box_bt box_cus">0.90%</u-td>
						</u-tr>
					</u-td>
                         </u-tr>
			</u-td>	
		</u-tr>
                 <u-tr>
                 	<u-td class="box_cus" width="25%">9座以下客车</u-td>
                 	<u-td class="box_cus">0.60%</u-td>
                 	<u-td class="box_cus">0.60%</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 </u-tr>
                 <u-tr>
                 	<u-td class="box_cus" width="25%">10座以下上客车</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 </u-tr>
                 <u-tr>
                 	<u-td class="box_cus" width="25%">微型载货汽车</u-td>
                 	<u-td class="box_cus">/</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 </u-tr>
                 <u-tr>
                 	<u-td class="box_cus" width="25%">带拖挂的载货汽车</u-td>
                 	<u-td class="box_cus">/</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 </u-tr>
                 <u-tr>
                 	<u-td class="box_cus" width="25%">低速货车和三轮汽车</u-td>
                 	<u-td class="box_cus">/</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 	<u-td class="box_cus">1.40%</u-td>
                 	<u-td class="box_cus">1.40%</u-td>
                 </u-tr>
                 <u-tr>
                 	<u-td class="box_cus" width="25%">其他车辆</u-td>
                 	<u-td class="box_cus">/</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 	<u-td class="box_cus">1.10%</u-td>
                 	<u-td class="box_cus">0.90%</u-td>
                 </u-tr>
	</u-table>
</view>

Style 文件

.table_box{
	.box_bt{
		border-bottom: unset !important;
	}
	.box_pd{
		padding: unset !important;
	}
	.box_br{
		border-right: unset !important;
	}
	.box_cus{
		padding: 10px 3px !important;
	}
	/deep/ .u-td[data-v-35ace0c0]{
		height: auto;
	}
}