pbl-student-table/src/components/easy2/commpont/evaTable.vue

<template>
  <div>
    <div class="evaCss">
        <el-table
          :data="eList"
          :header-cell-style="{ background: '#F0F4FA' }"
          :row-class-name="tableRowClassName"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column label="素养" align="center">
            <template slot-scope="scope">
              <div
                style="display:flex;justify-content: center;align-items: center;"
              >
                <img
                  class="blueRootCss"
                  v-if="
                    scope.row.isai == 1
                  "
                  src="../../../assets/icon/newIcons/blueRoot.png"
                  alt=""
                />
                {{ scope.row.target ? scope.row.target : "-" }}
              </div>
            </template></el-table-column
          >

          <el-table-column label="评价标准" align="center">
            <template slot-scope="scope"
              ><div>
                {{ scope.row.detail != "" ? scope.row.detail : "-" }}
              </div></template
            >
          </el-table-column>

          <el-table-column label="细则" align="center">
            <template slot-scope="scope"
              ><div
                style="display:flex;justify-content: space-around;margin:auto"
                v-if="scope.row.rule"
              >
                <el-popover placement="top" width="350" trigger="hover">
                  <div
                    v-html="scope.row.rule"
                    style="white-space:pre-wrap"
                  ></div>
                  <div slot="reference" style="color:#4383FF;cursor: pointer;">
                    查看
                  </div>
                </el-popover>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: ["eList"],
//   mounted() {
//     console.log("eList", this.eList);
//   },
  data() {
    return {};
  }
};
</script>

<style scoped>
.evaCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 0 0 20px;
  width: 100%;
}

.evaCss >>> .cell {
  position: relative;
  overflow: visible;
}
.evaCss >>> .el-table__body-wrapper {
  overflow: visible;
}
.evaCss >>> .el-table {
  overflow: visible;
}
.blueRootCss{
  display: block;
  margin-right: 5px;
}
.blueRootCss{
  position: absolute;
  top:50%;
  left: 0;
  transform: translate(-20px,-50%);
}
</style>