cbsl-app/pages/simpleResviror/aqjc/syjc.vue

<template>
  <view>
    <view class="search-bar">
      <view class="time-ranger">
        <uni-datetime-picker type="daterange" v-model="tm" @change="handleRanger"
        :clear-icon="false" rangeSeparator="至"></uni-datetime-picker>
      </view>
      <view class="select-bar">
        <uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
        </uni-data-select>
      </view>
    </view>
    <!-- 表格容器 - 统一滚动 -->
    <div class="table-container">
    <div class="tableHead">
        <div class="td fixed-col">序号</div>
        <div class="td fixed-col">监测点</div>
        <div class="td fixed-col time-col">监测时间</div>
        <!-- 动态列 -->
        <div v-for="(col, index) in dynamicColumns" :key="index" class="td dynamic-col">
          {{ col.name }}(m)
        </div>
      </div>
    <div class="tableBody">
      <div v-for="(item, index) in tableData" :key="index" class="tableRow">
          <div class="td fixed-col">{{ index+1 }}</div>
          <div class="td fixed-col">{{ item.pointName }}</div>
          <div class="td fixed-col time-col">{{ item.monitorTime }}</div>
          <!-- 动态列数据 -->
          <div v-for="(col, colIndex) in dynamicColumns" :key="colIndex" class="td dynamic-col">
            {{ item[col.field] || '--' }}
          </div>
        </div>
      <div :style="{ height: '80px' }">
      </div>
    </div>
    </div>
  </view>
    
</template>

<script>
import moment from "moment"
const stm = moment().subtract(3, 'days').format("YYYY-MM-DD");
const etm = moment().format("YYYY-MM-DD");
   export default {
  //    props:{
  //      tableData:{
  //        type:Array,
  //        default:[],
  //      }
  // },
     data() {
    return {
        tm: [stm, etm],
      list: [],
      value: "",
      dynamicColumns: [],
      tableData: [
        {pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
        {pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
        {pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
        {pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
        {pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
      ],
      dynamicColumns : [
        { name: 'we-01', field: 'we01', unit: 'L/s' },
        { name: 'we-02', field: 'we02', unit: 'L/s' },
        { name: 'we-03', field: 'we03', unit: 'L/s' },
        { name: 'we-04', field: 'we04', unit: 'L/s' }
      ]
      }
  },
  methods: {
    handleRanger(e) {
      this.tm = [...e]
    },
    change(e) {
      this.value = e;
    }
     }
   }
</script>

<style lang="scss" scoped>
.search-bar {
  display: flex;
  margin: 5px 0;
  align-items: center;
}

.time-ranger {
  flex: 1;
}

.select-bar {
  width: 30%;
  margin-left: 1%;
}
 /* 表格容器 - 统一横向滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.tableHead {
  width: max-content;
  min-width: 100%;
  margin-top: 5px;
  height: 50px;
  background-color: #e4f2fe;
  display: flex;
  color: #208FEE;
}

.tableBody {
  width: max-content;
  min-width: 100%;
  height: calc(80vh - 130px);
  overflow-y: auto;
}

.tableRow {
  width: max-content;
  min-width: 100%;
  height: 46px;
  display: flex;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
}

.td {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* 固定列样式 */
.fixed-col {
  width: 80px;
}

.time-col {
  width: 100px;
}

/* 动态列样式 */
.dynamic-col {
  width: 100px;
}
</style>