uni-app 不使用table 手码一个自适应高度的表格（暂时不适用于合并单元格，但是思路应该可以用于上篇文章的合并单元格）

好像uniapp自带的表格有些bug，所以就想自己写一个试试。
这是一开始的思路瞎写出来的样式图

先上代码

html
da-table.html

<view class="da-table" style="width: 722px;">
				<view class="da-table-head" >
						<view class="da-box-block">
							<view  class="da-next-box" v-for="(item, index) in proplanHead" :key="index + 'da'">
								<text class="da-text-da">{{item.name}}</text><view class="da-pt-bd" v-if="index !== 0"></view></view>
						</view>
				</view>
				
				<template>
					<view class="da-table-body">
						<da-tree-table-body :showData="planData" ></da-tree-table-body>
					</view>
				</template>
			</view>
复制代码

html
da-tree-table-body.html 这个起名请忽略 因为我弄的是树表格，正常表格也可以用。

<view>
    <template v-for="(item, index) in showData" >
        <view class="da-box-block" :key="index">
            <view v-if="item.children && item.children.length !== 0" class="da-icon-table-tree" :style="hasNext ? 'left:' + (hasNext * 1 * 3) +'px;': '0'" @click="daRotateChange(item)">
                <u-icon name="arrow-down-fill" :class="(item.darotate && item.darotate === '1') ? 'da-rotate' : ''" 
                ></u-icon>
        </view>
        <view  class="da-next-box">
            <text class="da-text-da" style="padding-left: 34upx;">{{item.num}}</text></view>
        <view  class="da-next-box">
            <text class="da-text-da">{{item.name}}</text><view class="da-pt-bd"></view></view>
        <view  class="da-next-box">
            <text class="da-text-da">{{item.limittime}}</text><view class="da-pt-bd"></view></view>
        <view  class="da-next-box">
            <text  class="da-text-da">{{item.starttime}}</text><view class="da-pt-bd" > </view></view>
        <view  class="da-next-box">
            <text  class="da-text-da">{{item.endtime}}</text><view class="da-pt-bd"> </view></view>
        <view  class="da-next-box"> <text  class="da-text-da">{{item.note}}</text><view class="da-pt-bd" > </view></view>
            <template>
                <view  class="da-next-box">
                    <text  class="da-text-da" > 选择操作</text><view class="da-pt-bd" > </view></view>
            </template>
        </view>
    </template>
</view>
复制代码

css

.da-table{
        display: inline-table;
        padding:10px;
        transform: scale(0.7);
        transform-origin: 0 0;
        margin-bottom: 20px;
}

.da-table-head{
        border-left: 1px solid #5d5d5d;
        border-bottom: 1px solid #5d5d5d;
        background-color: #ebeef5;
}

.da-table-head-tr{
        position: relative;
        min-height: 40px;
        display: block;
}

.da-table-head-th{
        border-right:1px solid #5d5d5d;
        border-top: 1px solid #5d5d5d;
        width: 100px;
        position: relative;
        display: inline-block;
        word-break: normal!important;
        text-align: left;
        padding-left: 10upx;
        vertical-align: top;
        line-height: 40px;
        /* text-align: center; */
        /* background-color: #0EA391; */
        height: 40px;
        overflow: hidden;
}
.da-table-body {
        border: 0px solid #5d5d5d;
        border-top: 0px;
        border-right: 0px;
        border-left: 1px solid #5d5d5d;
        border-bottom: 1px solid #5d5d5d;
}
.da-box-block{
        border-top: 1px solid #5d5d5d;padding: 2px;position: relative;padding: 0;
        border-right: 1px solid #5d5d5d;
}
.da-next-box{
        height: 100%;display: inline-block;vertical-align: middle;min-height: 20px;line-height: 20px;
        padding-top:10px;
        padding-bottom:10px;
}
.da-text-da{
        position: relative;display: block;
        white-space: normal;
        word-break: break-all;
        word-warp: break-word;
        width: 100px;
        padding-left: 20upx;
        padding-right: 10upx;
        /* text-align: center; */
}
.da-box-block:first-child{
        border-bottom: 0px;
}
.da-pt-bd{
        position: absolute;height: 100%;border-right:1px solid #5d5d5d;top: 0;
}
复制代码

proplanHead: [
    {name: '序号'},
    {name:'名称'}, 
    {name:'工期'}, 
    {name:'开始时间'}, 
    {name:'结束时间'}, 
    {name:'备注'}, 
    {name:'操作'},
]
planData:[{
    authorities: ""
    children: []
    complete: "1"
    endtime: "2020-07-10"
    id: 500
    jobcontent: "钢便桥、钢板桩围堰"
    limittime: 20
    name: "钢便桥、钢板桩围堰"
    num: "2"
    plan_id: 0
    starttime: "2020-06-21"},
    {
    authorities: ""
    children: []
    complete: "1"
    endtime: "2020-07-10"
    id: 500
    jobcontent: "钢便桥、钢板桩围堰"
    limittime: 20
    name: "钢便桥、钢板桩围堰"
    num: "2"
    plan_id: 0
    starttime: "2020-06-21"
    }
]
复制代码

正所谓授人以?，不如授人以渔?
先给大家说下思路吧，代码实现的话也是很简单的for循环和css
在html中，最主要的应该就是所有边框的高度要一样，以及单元格内容居中

行div 包单元格div 然后里面再写内容和一条线，线用absolute的定位后会跑到，单元格div的左边去（注意不能设置left:0;不然所有线都会跑到左边去，不设置的话就是脱离文档流，跑到一开始的位置，这个我也不知道怎么解释，有知道的大神可以在评论区交流下）。

此时单元格div没有设置position，而行div设置了position，所以线的高度设置为百分之百（.da-pt-bd）就是相对于行div的高度。

然后就是垂直居中的（.da-next-box），这里用到了vertical-align：middle; 还要考虑内容为空的时候，所以设置了个最小高度。

原创内容，转载需写清来源。