sagacloud-cwc-pages/src/views/evaluate/evTwoTable.vue

<template>
  <el-table
    class="expandTable"
    :data="dataList"
    style="width: 100%;z-index:1"
    :row-key="getRowKeys"
     :expand-row-keys="expands"
  >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.children" style="width: 100%;">
          <el-table-column type="selection" width="50" align="right"></el-table-column>
          <el-table-column prop label align="right" width="150">
            <template slot-scope="{row}">
              <img class="ex-img" v-if="row.isSatisfy==false" src="../../assets/warning.png" alt />
              <span class="ex-span">{{row.spaceLocalName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop label align="right">
            <template slot-scope="{row}">
              <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="meanTindoor" label align="right">
            <template slot-scope="{row}">{{(row.meanTindoor).toFixed(1)}}</template>
          </el-table-column>
          <el-table-column prop="tindoorOverrunDuration" label align="right"></el-table-column>
          <el-table-column prop="tindoorOverrunDegree" label align="right">
            <template slot-scope="{row}">{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
          </el-table-column>
          <el-table-column prop="longestTindoorOverrunDuration" label align="right"></el-table-column>
          <el-table-column prop="temperatureDifferenceMax" label align="center">
            <template slot-scope="{row}">{{(row.temperatureDifferenceMax).toFixed(1)}}</template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="name" label align="right" width="50"></el-table-column>
    <el-table-column prop label="位置详情" align="right" width="100"></el-table-column>
    <el-table-column prop label="温度要求范围(℃)" align="right"></el-table-column>
    <el-table-column prop label="平均温度(℃)" align="right"></el-table-column>
    <el-table-column prop label="累计超限时长(分钟)" align="right"></el-table-column>
    <el-table-column prop label="平均超限温度(℃)" align="right"></el-table-column>
    <el-table-column prop label="连续超限最大时长(分钟)" align="right"></el-table-column>
    <el-table-column prop label="最大温差(℃)" align="center"></el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      getRowKeys(row) {
        return row.id;
      },  
    };
  },
  props: ["dataList"],
  computed: {
    expands() {
      return this.dataList.map(i => {
          // 增加 isExpand 属性
          i.isExpand = i.children.some(c => c.isSatisfy == false)
          return i
        }).filter(j => j.isExpand).map(i => i.id)
    }
  },
  methods: {
    init() {
    }
  },
  mounted() {
    if (this.dataList.length > 0) {
      this.init();
    }
  }
};
</script>
<style lang="scss" scoped>
.expandTable {
  .ex-img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
  }
  .ex-span {
    width: 50px;
    display: inline-block;
    text-align: left;
  }
}
</style>
<style lang="scss">
.expandTable {
  .el-table thead {
    display: none;
  }
  .el-table__expanded-cell {
    padding: 0;
  }
}
</style>