<template>
  <div>
    <el-table
      :data="tableData"
      height="630"
      border>
      <el-table-column v-if="hasSelect"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="item in tableItem"
        :key="item.index"
        :prop="item.prop ? item.prop : ''"
        :label="item.tit ? item.tit : ''"
        :width="item.width ? item.width : ''"
        align="center">
        <template slot-scope="scope">
          <div v-if="scope.row[item.prop]">
            {{scope.row[item.prop]}}
          </div>
          <div v-if="item.operate && typeof scope.row === 'object'">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        :current-page.sync="pageNo"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  name: 'complexTable',
  props: ['tableData', 'tableItem', 'hasSelect'],
  data() {
    return {
      pageNo: 1,
      pageSize: 20,
      total: 0
    }
  },
  computed: {
    dataSize() {
      return this.tableData.length % this.pageSize
    }
  },
  created() {
    this.gapFilling()
  },
  methods: {
    gapFilling() {
      const needNum = this.pageSize - this.tableData.length % this.pageSize
      for (let i = 0; i < needNum; ++i) {
        this.tableData.push(i)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-table .cell{
    min-height: 23px
  }
</style>