hb_sis_zhfx/src/views/Home/dialog/table.vue

<template>
  <div class="health-day-info">
    <!-- <div class="header">
      <span class="herder-info">
        风机编号：麻黄山24号风机
      </span>
      <span class="herder-info">
        风机编号：麻黄山24号风机
      </span>
      <span class="herder-info">
        基础指标
      </span>
    </div> -->
    <div class="body">
      <div class="left">
        <table class="table-form">
          <tr>
            <td class="white"></td>
            <td class="white" v-for="(item, index) in tableData.datels" :key="index">{{item}}</td>
          </tr>
          <tr v-for="(item, index) in tableData.result" :key="index">
            <td class="white">{{item.value1}}</td>
            <td class="white">{{item.value2}}</td>
            <td class="white">{{item.value3}}</td>
            <td class="white">{{item.value4}}</td>
            <td class="white">{{item.value5}}</td>
            <td class="white">{{item.value6}}</td>
            <td class="white">{{item.value7}}</td>
            <td class="white">{{item.value8}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      tableData:{}
    };
  },

  props:{
    data:{
      type:Object,
      default:() => {}
    }
  },

  mounted(){
    this.tableData = this.data;
  },

  watch:{
    data(res){
      this.tableData = res;
    }
  }
};
</script>

<style lang="less">
.health-day-info {
  .header {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: fade(@gray, 60);
    color: @white;

    .herder-info {
      flex: 1 0 25%;
      text-align: center;
      font-size: @fontsize-s;

      &:last-child {
        flex: 1 0 50%;
      }
    }
  }

  .body {
    display: flex;
    .left {
      flex: 0 0 100%;

      display: flex;
      flex-direction: column;

      .chart-body {
        flex-grow: 1;
        display: flex;
        align-items: center;
      }
    }
    .right {
      flex: 0 0 50%;
    }
  }
}
</style>