<template>
  <div class="hello">
    <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="region"
      label="地区">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型">
    </el-table-column>
    <el-table-column
      prop="company.name"
      label="企业名称">
    </el-table-column>
  </el-table>

  </div>
</template>

<script>
// import VueGridLayout from 'vue-grid-layout'
export default {
  name: 'HelloWorld',
  data() {
    return {
      table: [
        {
          id: 1,
          region: '深圳',
          type: '外贸',
          company: [
            { name: '深圳外贸公司1' },
            { name: '深圳外贸公司2' },
            { name: '深圳外贸公司3' },
            { name: '深圳外贸公司4' }
          ]
        },
        {
          id: 2,
          region: '北京',
          type: '金融',
          company: [
            { name: '北京金融公司1' },
            { name: '北京金融公司2' },
            { name: '北京金融公司3' }
          ]
        },
        {
          id: 2,
          region: '上海',
          type: '金融',
          company: [{ name: '上海金融公司1' }, { name: '上海金融公司2' }]
        }
      ],
      tableData: [], //表格数据
      arr: [] //合并参数
    }
  },
  created() {
    this.initData(this.table)
  },
  methods: {
    // 初始化数据
    initData(data) {
      console.log(11, data)
      this.tableData = []
      const tempdata = data.filter(item => item.company)
      let s = 0
      tempdata.forEach((item, i, data) => {
        item.company.forEach(e => {
          this.tableData.push({
            id: item.id,
            region: item.region,
            type: item.type,
            company: e
          })
        })
        if (this.arr.length) {
          s = this.arr[this.arr.length - 1].row + data[i - 1].company.length
        }
        this.arr.push({
          row: s, // 合并的起始行
          index: item.company.length // 合并的行数
        })
      })
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        let obj = []
        this.arr.forEach(item => {
          if (rowIndex === item.row) {
            obj = [item.index, 1]
          }
        })
        return obj
      }
    }
  }
}
</script>