ElementUI 表格动态显示(表头,内容)

2,511 阅读1分钟

1、想要的展示效果

image.png

2、数据结构

image.png

image.png



3、实现方法(用嵌套表格的思维)

E4A0A490-54B9-4cae-B3FE-0B68F9A80E8B.png


image.png


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; 。