业务场景:
很多情况下我们后台查询的数据需要显示在table中的时候,由于数据分类比较多,导致一个table无法很好的完整显示所有的属性信息,这个时候我们就需要让主要的数据信息显示在table界面上,然后点击table行,可以具体查看该行的所有详细数据
实现方法
利用el_table的expand属性实现
代码语言:javascript复制<el-table-column type="expand">
<template slot-scope="props">
<el-table
border
:data="props.row.dataitems"
v-loading="loading">
<el-table-column label="名称" align="center" prop="name_cn" />
<el-table-column label="值" align="center" prop="value" />
<el-table-column label="单位" align="center" prop="unit" />
</el-table>
</template>
</el-table-column>