Uniapp seems to have some bugs in the form, so I want to write a try. This is the original idea of a style diagram that was written out of the blue

On the first code

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>Copy the code

HTML da-tree-table-body. HTML I’m going to ignore this name because I’m doing a tree table, and you can use a normal table.

<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" > Select operation </text><view class="da-pt-bd" > </view></view> </template> </view> </template> </view>Copy the code

css

.da-table{ display: inline-table; padding:10px; The 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; }Copy the code
proplanHead: [ {name: 'number'}, {name: 'name'}, {name: 'duration'}, {name: "start time"}, {name: 'end times'}, {name:' remarks'}, {name: 'operating'},] planData: [{authorities: "Children: [] Complete: "1" EndTime: "2020-07-10" iD: 500 "Auxiliary bridge steel, steel sheet pile cofferdam" num: "2" plan_id: 0 starttime: "2020-06-21"}, {authorities: "" the children: [] complete:" 1 "endtime: Limittime: 20 Name: "Limittime: 20" Num: "2" plan_id: 0 startTime: 0 "2020-06-21"}]Copy the code

For loop and CSS in HTML, the most important thing should be all the height of the border should be the same, and the cell content should be centered

The line div wraps the cell div and then writes inside it and a line that runs to the left of the cell div with absolute positioning (note that you cannot set left:0; Otherwise, all lines will run to the left. If you do not set this, you will leave the document stream and run to the original position.

The cell div has no position set, but the line div has position set, so the line height is set to 100% (.da-pt-bd) relative to the line div.

Da-next-box = vertical-align: middle; Also consider empty content, so set a minimum height.

Original content, reprint need to write clear source.