当前位置: 首页 > article >正文

记录一个移动端表格布局,就是一行标题,下面一列是对应的数据,一条一条的数据,还有点击数据进入详情的图标,还可以给一列加input输入框,还可以一对多

注:以下字段名都是随手写,并不规范,自己替换自己的,,只参考样式

注:以下重要的是布局,样式,宽高什么的再自己去搞吧

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

    }


http://www.kler.cn/a/488284.html

相关文章:

  • 【文件I/O】文件持久化
  • Jmeter-压测时接口如何按照顺序执行
  • 国产信创实践(国能磐石服务器操作系统CEOS +东方通TongHttpServer)
  • C语言初阶习题【25】strcpy的模拟实现
  • 你好,2025!JumpServer开启新十年
  • 《繁星路》V1.8.3(Build16632266)官方中文学习版
  • dubbo3 负载均衡
  • js迭代器模式
  • python+camelot库:提取pdf中的表格数据
  • 工厂人员定位管理系统方案(二)人员精确定位系统架构设计,适用于工厂智能管理
  • 《零基础Go语言算法实战》【题目 2-1】使用一个函数比较两个整数
  • iOS - 数组的真实类型
  • .NET 终止或结束进程
  • [SAP ABAP] 使用LOOP AT...ASSIGNING FIELD-SYMBOL 直接更新内表数据
  • Unity3D使用GaussianSplatting加载高斯泼溅模型
  • React Error Boundary 错误边界限制
  • Java Web开发进阶——Spring Security基础与应用
  • 华为C语言编程规范总结
  • 用户界面的UML建模11
  • MIT 6.S081 Lab9 File System
  • jeecg-boot 表单选择一条数据保存
  • 深入学习Headers Exchange交换机
  • 打桩机:灾害救援中的 “应急尖兵”,稳固支撑的保障|鼎跃安全
  • 解锁无证身份核验:开启便捷安全新征程
  • 专精特新申报条件
  • 了解RabbitMQ的工作原理