注：以下字段名都是随手写，并不规范，自己替换自己的，，只参考样式
注：以下重要的是布局，样式，宽高什么的再自己去搞吧
<view class="search">
<u-search @change="searchfun" v-model='keyword' bgColor='#FFFFFF' :showAction="false"
height="35"></u-search>
</view>
<!-- -->
<view class="choicetwo22">
<view class="table-container">
<view class="table-header">
<view class="header-cell header-cell-narrow">测点</view>
<view class="header-cell header-cell-narrow">本次变化量(mm)</view>
<view class="header-cell header-cell-narrow">累计变化量(mm)</view>
<view class="header-cell header-cell-narrow">速率(mm/天)</view>
<view class="header-cell cell-spi"></view>
<!-- <view class="header-cell header-cell-wide">观测值</view> -->
</view>
<view v-for="(item, index) in points" :key="index" class="table-row"
:class="{ 'last-item': index != points.length - 1 }">
<view class="cell cell-narrow">{{ item.name }}</view>
<view class="cell cell-narrow">{{ item.nowvalue }}</view>
<view class="cell cell-narrow">{{ item.sumvalue }}</view>
<view class="cell cell-narrow">{{ item.speed }}</view>
<view class="cell cell-spi">
<image @click="tothingsdetail(item)" class='listicon'
src="../../static/mainnow/xingzhuang815_1.png" mode=""></image>
</view>
<!-- <view class="cell cell-wide">
<input :value="item[bindProperty]" type="number" placeholder="请输入观测值"
@input="handleInput($event, index)" @blur="updateValue(index)" />
</view> -->
</view>
</view>
</view>
++++++++++++++++++++++++++++++++++++++++++
.header-cell {
font-weight: 600;
// padding-bottom: 10px;
// border-bottom: 1px solid #D7DBEA;
}
.header-cell-narrow,
.cell-narrow {
width: 30%;
/* 测点编号列占30% */
box-sizing: border-box;
/* 确保padding和border包含在width内 */
}
.header-cell-wide,
.cell-wide {
width: 70%;
/* 观测值列占70% */
box-sizing: border-box;
/* 确保padding和border包含在width内 */
}
.cell-spi {
width: 5%;
box-sizing: border-box;
/* 确保padding和border包含在width内 */
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
/* 固定表格布局 */
}
th,
td {
padding: 8px;
text-align: center;
height: 60px;
}
th {
font-weight: bold;
}
.center-cell {
vertical-align: middle;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
/* 确保高度适应内容 */
}
.table-row {
display: flex;
padding: 10px;
height: 60px;
color: #757b9b;
}
.cell {
// flex: 1;
text-align: center;
line-height: 40px;
}
第二种
<view class="table-container">
<table width="100%">
<thead>
<tr>
<th class="col-25">测点编号</th>
<th class="col-25">传感器编号</th>
<th class="col-50">传感器值</th>
</tr>
</thead>
<tbody>
<!-- 使用双重循环遍历 pointspower 和其内部的 cgq 数组 -->
<template v-for="(item, index) in pointspower">
<!-- 显示每个 cgq 对象的行 -->
<tr v-for="(sensor, sensorIndex) in item.cgqbhs"
:class="{ 'last-item': isLastItem(index, sensorIndex) }">
<!-- 测点编号只在第一行显示，并使用 rowspan 合并单元格 -->
<td v-if='sensorIndex === 0' :colspan="item.cgqbhs.length"
class="center-cell cell ">
{{ item.jcdbh }}
</td>
<td v-else :colspan="item.cgqbhs.length" class="center-cell ">
</td>
<td class=" col-25">{{ sensor.cgqbh }}</td>
<td class="cell col-50">
<input :value="sensor.pl" type="number" placeholder="输入观测值"
@input="handleInputs($event, index, sensorIndex)"
@blur="updateValues(index, sensorIndex)" />
</td>
</tr>
</template>
</tbody>
</table>
</view>
++++++++++++++++++++++
.col-25 {
width: 25%;
box-sizing: border-box;
}
.col-50 {
width: 50%;
box-sizing: border-box;
}
.header-cell-narrow,
.cell-narrow {
width: 30%;
/* 测点编号列占30% */
box-sizing: border-box;
/* 确保padding和border包含在width内 */
}
.header-cell-wide,
.cell-wide {
width: 70%;
/* 观测值列占70% */
box-sizing: border-box;
/* 确保padding和border包含在width内 */
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
/* 固定表格布局 */
}
th,
td {
padding: 8px;
text-align: center;
height: 60px;
}
th {
font-weight: bold;
}
.center-cell {
vertical-align: middle;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
/* 确保高度适应内容 */
}
.last-item {
border-bottom: none;
}
.header-cell {
// flex: 1;
text-align: center;
}
.table-row {
display: flex;
padding: 10px;
height: 60px;
}
.cell {
// flex: 1;
text-align: center;
line-height: 40px;
}
.cell input {
width: 100%;
height: 120%;
box-sizing: border-box;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
.cell uni-input {
width: 100%;
height: 120%;
box-sizing: border-box;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
/deep/ .uni-select__selector-item {
display: flex;
cursor: pointer;
line-height: 35px;
font-size: 14px;
text-align: left;
padding: 0px 10px;
}
.last-item {
border-bottom: 1px solid #D7DBEA;
/* 移除最后一条项的下边框 */
}
/deep/ .uni-stat__select {
display: flex;
align-items: center;
cursor: pointer;
width: 70vw;
flex: 0;
box-sizing: border-box;
}
.lablename {
width: 80px;
min-width: 80px;
}
/deep/ .uni-select__input-text {
// width: 100%;
width: 50vw;
color: #333;
white-space: wrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
text-align: right;
color: #85898C;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 设置最大行数 */
overflow: hidden;
text-overflow: ellipsis;
}
