vue3+Elmentplus实现特定表格样式,单元格内含一张子表,与父表共享单元格

问题遇到的现象和发生背景

img

各位 兄台,请问如何 实现图中的表格样式 (vue3+Elmentplus)

引入vxe-table插件可以完成以上操作 或者elementui中的table中的展开行示例可以借鉴
推荐用vxe-table,改动少

这只是 样式的不同把。。。 只需要改变table的12、56行的数据 可以用伪类:
方案1.nth-child(n4-3) 和nth-child(n4-2) 修改它背景色就好了。
方案2.

// 最好是tableData 返回的时候给 需要改色的那条数据 加个标识 比如 isHeader:true
<el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"> // 这里也可以直接使用row-style 直接写样式.,如果还是不明白去看官网文档row-style和row-class-name
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
tableRowClassName({row, rowIndex}) {
        // rowIndex 你也可以直接通过判断行数 赋值 。
        if (row.isHeader) return 'warning-row'; // warning-row 是一个class 类名 你去写它的样式就好 到时候匹配上的会用这个类名的。
        return '';
      }