如何在 Element UI 表格中显示嵌套单元格？

Posted 2023-05-08

【中文标题】如何在 Element UI 表格中显示嵌套单元格？

【英文标题】：How to display nested cells in Element UI table?

【发布时间】：2019-05-20 07:29:59

【问题描述】：

我正在使用Element UI。我有需要在表格中显示的嵌套数据。我无法理解如何显示嵌套数据的问题。

这是我的代码：

 <el-table :data="tableData" stripe border>
  <el-table-column  prop="id"></el-table-column>
  <el-table-column >
    <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/

我想显示为：

【问题讨论】：

您能否分享一个文档链接，让您相信 nested 已为 Element UI 表格元素定义？

以下是如何在 Element UI 表中添加可扩展行：element.eleme.io/?ref=madewithvuejs.com#/en-US/component/…

【参考方案1】：

一种解决方案是使用span-method in Element UI Table

首先，使用计算方法来扁平化你的数据结构：

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
        ;
      
    
  

Demo on jsfiddle