xytSk-App/pages/rain/Table.vue

<template>
   <div class="table_div">
              <div class="table_cur">
                <table style="width:100%;display:block">
                  <tr>
                    <th style="width: 11%;">
                      <div style="margin-top: 6px;">序号</div>
                      </th>
                    <th style="width: 27%">
                     <div style="margin-top: 6px;">站名</div></th>
                    <th style="width: 20%;">
                      <div>时段雨量</div>
                      <div style="margin-top: -12px;">(mm)</div>
                      </th>
                    <th style="width: 20%;" >
                      <div>昨日降雨</div>
                      <div style="margin-top: -12px;">(mm)</div>
                      </th>
                    <th style="width: 22%">
                      <div style="margin-top: 6px;">所属政区</div></th>
                  </tr>
                  <!-- :style="{'max-height':height + 'px', 'overflow-y': 'auto',width:'100%'}" -->
                  <div class="scroll-table">
                  <tr v-for="(item, index) in list" :key="index" style="width:100%">
                      <td style="width: 11%;">{{ index + 1 }}</td>
                      <td style="width: 27%; color: #3399ef; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">
                        {{ item.stnm }}</td>
                      <td style="width: 20%">{{ item.drp ?? "-"  }}</td>
                      <td style="width: 20%">{{ item.yesDrp ?? "-" }}</td>
                      <td style="width:23%;">{{ item.adnm }}</td>
                    </tr>
                    <div style="height:160px"></div>
                  </div>
                  
                </table>
              </div>
            </div>

</template>

<script>
   export default {
     props:{
       list:{
         type:Array,
         default:[],
       },
       height:{
        type:Number,
        default:0,
       }
     },
   
     methods:{
       jumpDetail(params){
         console.log(123)
         uni.navigateTo({
           url:`/pages/rainDetail/rainDetail?stcd=${params.stcd}&stnm=${params.stnm}&sttp=${params.sttp}&source=${params.source}`
         })
       }
     },
   
   }
</script>

<style lang="scss" scoped>
  .table_div {
    height: 100%;
    max-width: calc(100% - 0px);
    max-height: calc(100vh);
    flex: 1;
    padding-top: 0px;
    overflow-x: scroll;
    padding: 0 10px;
  }
  /*table样式*/
  .table_cur {
    width: 100%;
    empty-cells: show;
    border-collapse: collapse;
    font-size: 14px;
  }
  .table_cur tr {
    display: flex;
    line-height: 56rpx;
  }
  .table_cur th {
    height: 80rpx;
    color: #3399ef;
    background: #e1f3ff;
    font-size: 14px;
    // font-weight: bold;
    padding: 0px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center !important;
  }
  .scroll-table{
    height: calc(100vh - 160px);
    overflow-y: auto;
    width:'100%'
  }
  .table_cur td {
    height: 65rpx;
    // border-bottom: 1px solid #d8ddeb;
    font-size: 14px;
    color: #2f4056;
    padding: 0 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center !important;
  }
  /*table样式 end*/
</style>