<template>
  <div>
    <el-table
      :data="data"
      border
      style="width: 100%"
      :max-height="maxHeight"
      :resizable="false"
      v-loading="tableLoading"
    >
      <el-table-column
        v-for="(item, key) in option"
        :width="item.width"
        align="center"
        :key="key"
        :label="item.label"
      >
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row[item.prop]"
            placement="top"
          >
            <span> {{ scope.row[item.prop] }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Tablemodule",
  props: ["option", "data", "maxHeight",'tableLoading'],
  data() {
    return {};
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  rel="stylesheet/scss" lang="scss">
/deep/.el-table,
/deep/.el-table thead,
/deep/.el-table tr,
/deep/.el-table td.el-table__cell,
/deep/.el-table th.el-table__cell.is-leaf {
  color: #03bcff !important;
  background: transparent !important;
  border-color: #03bcff !important;
}
/deep/.el-table::before,
/deep/.el-table--border::after,
/deep/.el-table--group::after {
  background-color: #03bcff;
}
/deep/.el-table td.el-table__cell,
/deep/.el-table .el-table__cell {
  padding: 4px 0;
}
/deep/.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  font-size: 12px;
}
</style>
