要实现的结果图如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210701171712254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODc2MTkyMA==,size_16,color_FFFFFF,t_70
关键点
- tree-props的children值类型为数组,也就是要展开的内容
- default-expand-all 展开一行展开显示
<el-table :data="versionList" row-key="uuid"
default-expand-all
:tree-props="{children: 'strategyBagVersionList', hasChildren: 'hasChildren'}" >
<el-table-column :label="$t('xxx')" prop="label" > </el-table-column>
...
</el-table>
另外一种笨方法
要实现的结果图如下:
具体js代码实现如下:
- 展开一行使用
<el-table-column type="expand" >
里面套表格B - 去掉内表格B的表头(:show-header=“false”)
- 以及调整展开一行的padding
- 将外表格A与内表格B的字段宽度保持一致
<el-table :data="versionList">
<template slot="empty">
<table-empty></table-empty>
</template>
<el-table-column type="expand" >
<template slot-scope="scope">
<el-table :data="scope.row.strategyBagVersionList" :show-header="false" class="expandTableStyle">
<el-table-column :label="$t('BanBen')" show-overflow-tooltip width="100" prop="version">
<template slot-scope="props">
<el-link type="primary" @click