el-table拆分单元格

el-table的官方文档给出了合并单元格的方法，本以为拆分和合并是一样的，但是tableData遍历出一条数据在表格中就添加一行，而现在是要根据这一条数据里面的数据把这一行拆分称两行或多行，这样貌似是行不通的。然后我看别的写的相关文章，就是给要拆分的单元格里面写一个表格，然后添加CSS样式，让表格看起来是被拆分的效果。

<el-table border isIndex :tableColumn="tableColumn" :tableData="tableData">
	<template #count="{row}">
         <div class="annotations">
              <tr class="annotation-rs cluster-rs" v-for="(item,index) in row.replicas" :key="index">
                  <td>{{item.key}}: {{item.value}}</td>
              </tr>
         </div>
    </template>
</el-table>

data(){
	tableColumn: [
        {
          label: "名称",
          prop: "name",
          align: "center",
        },
        {
          label: "命名空间",
          prop: "space",
          align: "center",
        },
        {
          label: "实例数",
          prop: "replicas",
          align: "center",
          slot: "count",
        },
        {
          label: "集群tag",
          prop: "annotations",
          slot: "tag",
          align: "center"
        },
        {
          label: "集群资源",
          prop: "clusterRs",
          slot: "rs",
          align: "center"
        },
    ],
    tableData: [],
}

methods:{
	async getList() {
      this.loading = true;
      const res = await getClusterList();
      this.tableData = res.list;
  }
}

<style lang="scss">
  .cluster-rs {
    text-align: center;
  }
  .annotation-rs{
    width: 100%;
    height: 100%;
    border: none;
    td{
      width: 155px;
      padding: 5px;
      border-right: none;
      text-align: center;
      vertical-align: middle;
    }
  }
  tr:last-child{
    td{
      border-bottom: none;
    }
  }
</style>