hsz-app/pages/aqjc/jcsjTable.vue

<template>                                                                              
  <div class="table_div">
    <div class="table_cur">
      <div class="scroll-table">
        <table class="aqjc-table">
          <thead>
            <tr>
              <th v-for="(cols,i) in columns" :key="i" :style="getStyle(cols)">
                {{ cols.title }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data" :key="index">
              <td style="width:100px;text-align:center">{{ index + 1 }}</td>
              <td style="width:200px;text-align:center">{{ item.tm }}</td>
              <td style="width:100px;text-align:center">{{ item.rz}}</td>
              <td v-for="(col,i) in newCol" :key="i" style="width:100px;text-align:center;">
                {{ item[col.key] }}
              </td>
              <td style="width:100px;text-align:center">
                {{ item.status == 1 ? "正常" : item.status == 0 ? "异常" : '' }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


</template>

<script>
  import moment from "moment"
   export default {
     props:{
       columns:{
         type:Array,
         default:[],
       },
        data:{
         type:Array,
         default:[],
       },
        cols2:{
         type:Array,
         default:[],
       },
       newCol:{
         type:Array,
         default:[],
       }
     },
     computed:{
      //  newList(){
      //    if(this.tableData.length){
      //      return this.tableData.map(item => ({...item,tm:moment(item.tm).format("MM-DD HH:mm")}))
      //    }
      //  }
     },
     methods:{
       getStyle(row){
        return {
          width:row.title == "时间" ? "200px": "100px"
        }
       }
     }
   }
</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;
    overflow-y: auto;
  }
  /*table样式*/
  .table_cur {
    width: 100%;
    empty-cells: show;
    border-collapse: collapse;
    font-size: 14px;
  }
  .scroll-table{
    height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: auto;
    width: 100%
  }
  .aqjc-table {
    table-layout: fixed;
    width: max-content;
  }
  .aqjc-table tr {
    line-height: 90rpx;
  }
  .table_cur th {
    height: 85rpx;
    color: #3399ef;
    background: #e1f3ff;
    font-size: 14px;
    // font-weight: bold;
    padding: 0px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center !important;
  }
  
  .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>