<template>
    <el-table
     class="innerTable"
     :data="tableData"
    >
      <el-table-column v-for="item in tableColumn" :key="item"
      :prop="item"
      :label="item">
      </el-table-column>
    </el-table>
</template>
<script>
export default {
  props: {
    rowTable: {
      default() {
        return []
      }
    }
  },
  computed: {
    tableData: function() {
      const typeData = typeof this.rowTable
      if (typeData === 'string' && this.rowTable) {
        return JSON.parse(this.rowTable)
      } else if (Array.isArray(this.rowTable)) {
        return this.rowTable
      } else {
        return []
      }
    },
    tableColumn: function() {
      if (this.tableData.length) {
        const row = Object.keys(this.tableData[0])
        return row
      } else {
        return []
      }
    }
  },
  mounted() {
    console.log('表格展开行数据')
    console.log(this.tableData)
  },
  data() {
    return {

    }
  }
}
</script>
<style scoped>
.innerTable{
        border: 1px solid #ebeef5 !important
}
</style>
