学废了吗_elementui多级表头的表格

 

<template>
  <div>
    <div style="padding: 20px; background: #fff;">
    <el-table
      :data="tableData">
      <el-table-column
        prop="region"
        label="区域"
        align="center"
        min-width="150">
      </el-table-column>
      <el-table-column
        align="center"
        label="AAA">
        <el-table-column
          prop="AAAname"
          label="姓名"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="AAAage"
          label="年龄"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="AAAsex"
          label="性别"
          min-width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="BBB">
        <el-table-column
          prop="BBBname"
          label="姓名"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="BBBage"
          label="年龄"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="BBBsex"
          label="性别"
          min-width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="CCC">
        <el-table-column
          prop="CCCname"
          label="姓名"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="CCCage"
          label="年龄"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="CCCsex"
          label="性别"
          min-width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
  </div>
  
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      tableData: [],
      data: {
        '西安': [
          {
            'name': 'aaa',
            'age': '23',
            'sex': ' female',
            'region': '西安',
            'cate': 'AAA'
          }, {
            'name': 'bbb',
            'age': '23',
            'sex': ' female',
            'region': '西安',
            'cate': 'BBB'
          }, {
            'name': 'ccc',
            'age': '23',
            'sex': ' female',
            'region': '西安',
            'cate': 'CCC'
          }
        ],
        '江西': [
          {
            'name': 'ddd',
            'age': '23',
            'sex': ' female',
            'region': '南昌',
            'cate': 'AAA'
          }, {
            'name': 'eee',
            'age': '23',
            'sex': ' female',
            'region': '南昌',
            'cate': 'BBB'
          }, {
            'name': 'fff',
            'age': '23',
            'sex': ' female',
            'region': '南昌',
            'cate': 'CCC'
          }
        ],
        '广州': [
          {
            'name': 'xxx',
            'age': '23',
            'sex': ' male',
            'region': '广州',
            'cate': 'AAA'
          }, {
            'name': 'yyy',
            'age': '23',
            'sex': ' male',
            'region': '东莞',
            'cate': 'BBB'
          }, {
            'name': 'zzz',
            'age': '23',
            'sex': ' female',
            'region': '广州',
            'cate': 'CCC'
          }
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let tabledata = []
      Object.values(this.data).forEach(item => {
        let obj = {}
        item.forEach(items => {
          obj.region = items.region
          console.log('region',obj.region)
          obj[items.cate + 'name'] = items.name
          console.log('name',obj[items.cate + 'name'])
          obj[items.cate + 'age'] = items.age
          obj[items.cate + 'sex'] = items.sex
        })
        tabledata.push(obj)
      })
      this.tableData = tabledata
    }
  }
}
</script>