<template>
  <div style="height: 100%">
    <el-table :data="data" border class="api-table-class" :span-method="spanMethod" height="100%">
      <template v-for="col in columns">
        <el-table-column :prop="col.prop" :label="col.label" :width="col.width" :min-width="col.minWidth" class-name="api-table-cell">
          <template slot-scope="scope">
            <div v-html="scope.row[scope.column.property]" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ApiTable',
  props: ['data', 'columns', 'spanMethod'],
  methods: {
    formatCol(row, column, cellValue, index) {
      return cellValue
    }
  }
}
</script>

<style scoped>
    .api-table-class {
        width: 100%
    }

    .api-table-class /deep/ th, .api-table-class /deep/ td {
        padding: 2px;
    }

    /*模式式样覆盖：垂直居上*/
    .el-table /deep/ .api-table-cell {
        vertical-align: top
    }
</style>
