<template>
  <el-dialog center :title="title" :visible.sync="visible" :width="width">
    <div>
      <div v-if="columns">
        <el-table-self
          ref="table"
          :table-data="tableData"
          :columns="columns"
          :list-loading="listLoading"
          :max-height="maxHeight"
          :current-page="pageIndex"
          :total-count="total"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import elTableSelf from "@/components/TabComponents/index"
import paginationMixin from "@/components/TabComponents/mixin"
export default {
  name: "dialogTable",
  components: {
    elTableSelf,
  },
  mixins: [paginationMixin],
  data() {
    return {
      visible: false,
      loading: false,
      listLoading: false,
    }
  },
  props: {
    columns: Array,
    tableData: Array,
    maxHeight: Number,
    width: {
      type: String,
      default: "365px",
    },
    title: {
      type: String,
      default: "系统提示",
    },
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="scss">
.headerClass {
  th {
    background-color: #eef5fd !important;
    color: #586276;
    font-weight: normal;
  }
}
.img-avatar {
  border-radius: 50%;
  border: 0;
  cursor: pointer;
}
.describe {
  margin-top: 10px;
  .des {
    text-align: center;
    color: red;
  }
  .el-form {
    margin-top: 10px;
    .el-form-item__label {
      text-align: left;
      padding: 0;
    }
  }
}
</style>