1、想要的展示效果
2、数据结构
3、实现方法(用嵌套表格的思维)
a、步骤讲解
1、用<el-table>解析第一层数据结构,<el-table-column :lable="item.buildName">获得表头
2、用第二个<el-table>解析第二层数据结构 :data="item.roomInfo",并隐藏其表头 :show-header="false"
3、用<template>解析最里面的数组结构
b、问题
问题1:会发现出现多行重复数据,要求只展示一行。
解决方法:用<template slot-scope="scope">获取本行对象的唯一id进行v-if判断。
解决方法:推测用问题2的解决办法可以解决问题1,可以尝试一下。
问题2:会发现数据只展示一行,但是不展示数据的行是空白条
解决方法:在最外层<el-table :row-style="rowStyle">用样式隐藏 visibility:collapse; 。