Element - Vue使用slot-scope和v-for遍历数据为树形表格

记录一下小技巧，使用slot-scope和v-for遍历数据为树形表格。

<el-table :data="mealData" row-key="id" default-expand-all :tree-props="{children: 'children'}" class="popoverTable">
  <el-table-column width="210" property="product" label="菜品名称"></el-table-column>

  <el-table-column width="260" label="菜品版本" style="white-space: pre-line;">
    <template slot-scope="scope">
      <p v-for="(item, index) in scope.row.version" :key="index">{
  
  {item}}</p>
    </template>
  </el-table-column>
</el-table>

let mealData = {
    "children": [
        {
            "id": 10001,
            "product": "干锅肥牛",
            "version": [
                "10001-v1"
            ]
        },
        {
            "id": 10002,
            "product": "攸县香干",
            "version": [
                "10002-v1"
            ]
        }
    ],
    "count": 2,
    "id": 181,
    "product": "湘城小厨"
}

        

          
        
        
        

          

          AI 代码解读