Как отобразить вложенные ячейки в таблице Element UI?

Question

Я использую Элемент интерфейса .У меня есть вложенные данные, которые мне нужно отобразить в таблице.Проблема в том, что я не могу понять, как отображать вложенные данные.

Вот мой код:

 <el-table :data="tableData" stripe border>
  <el-table-column width="170" prop="id"></el-table-column>
  <el-table-column width="170">
    <template slot-scope="scope">
    <!-- -->
    </template>
  </el-table-column>

 </el-table>

раздел данных:

  tableData: [
   {
   "id":1,
   "nested": [{"name": "mike"}, {"name": "piter"}]
   },
   {
   "id":2,
   "nested": [{"name": "maria"}, {"name": "anna"}]
   },      
  ]

  };

https://jsfiddle.net/3nhb79qc/

Я хочу отобразить это как:

Answer 1

В одном решении используется span-метод в таблице элементов пользовательского интерфейса

Сначала выровняйте структуру данных с помощью вычисленного метода:

computed: {
  expandData() {
    return this.tableData.reduce((a, c) => {
      const arr = c.nested.map(item => ({
        id: c.id,
        name: item.name
      }))
      a = a.concat(arr)
      return a

    }, [])
  }
},

, затем ваши данные будутстать:

[
    {
        "id": 1,
        "name": "mike"
    },
    {
        "id": 1,
        "name": "piter"
    },
    {
        "id": 2,
        "name": "maria"
    },
    {
        "id": 2,
        "name": "anna"
    }
]

После этого определить objectSpanMethod и использовать его в el-table

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      if (rowIndex % 2 === 0) {
        return {
          rowspan: 2,
          colspan: 1
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    }
  }

Демонстрация на jsfiddle