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="tableData" style="width: 100%;">
          <el-table-column type="selection" width="50" align="right"></el-table-column>
          <el-table-column prop="name" label align="right" width="150">
            <template slot-scope="{row}">
              <img class="ex-img" src="../../assets/warning.png" alt />
              {{row.name}}
            </template>
          </el-table-column>
          <el-table-column prop="a" label align="right"></el-table-column>
          <el-table-column prop="b" label align="right"></el-table-column>
          <el-table-column prop="c" label align="right"></el-table-column>
          <el-table-column prop="d" label align="right"></el-table-column>
          <el-table-column prop="e" label align="right"></el-table-column>
          <el-table-column prop="f" label align="center"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="g" 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;
      },
      expands: []
      // tableData: [
      //   {
      //     id: "1",
      //     name: "优衣库",
      //     a: "22-26",
      //     b: "26.5",
      //     c: "37",
      //     d: "-1",
      //     e: "12",
      //     f: "-3",
      //     g: "F3"
      //   },

      //   {
      //     id: "3",
      //     name: "优衣库",
      //     a: "22-26",
      //     b: "26.5",
      //     c: "37",
      //     d: "1",
      //     e: "12",
      //     f: "-3",
      //     g: "F2"
      //   }
      // ]
    };
  },
  methods: {
    init() {
      if (this.tableData) {
        this.tableData.forEach(item => {
          if (item.d > 0) {
            this.expands.push(item.id);
          }
        });
      }
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.expandTable {
  .ex-img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
  }
}
</style>
<style lang="scss">
.expandTable {
  .el-table thead {
    display: none;
  }
  .el-table__expanded-cell {
    padding: 0;
  }
}
</style>