elementUI表格树结构以及展开一行：表格A中展开一行中的表格B，需要展示的内容一致，即表格A，B共用一个表头

要实现的结果图如下：

![在这里插入图片描述](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