Vue3 使用Element-plus table 显示一行 需要内嵌多行数据

一、背景

业务需求 需要这种

二、实现

``

点击查看代码

 <el-table
                        ref="singleTableRef"
                        highlight-current-row
                        border
                        :data="state.personData"
                        class="data-table"
                        max-height="600"
                        header-cell-class-name="table-header-cell"
                        stripe
                        style="width: 100%"
                        @row-click="inspectionPointsChange"
                    >
                        <el-table-column align="left">
                            <template #default="props">
                                <div class="person_info">
                                    <div class="person_name">姓名: {{ props.row.realname }}</div>
                                    <div class="person_idCard">身份证: {{ props.row.idNumber }}</div>
                                </div>
                                <div class="person_unit">所属单位: {{ props.row.unit.name }}</div>

                            </template>
                        </el-table-column>
                    </el-table>
					
					
					
					
<style scoped lang="scss">

.person_info {
    display: flex;
}

.person_idCard {
    margin-left: auto;
    color: #7a7979;
    font-weight: lighter;

}

.person_name {
    font-size: 16px;
    font-weight: bolder;
}

.person_unit {
    padding-top: 2px;
    font-size: 14px;
}


</style>

三、遇到的报错

四、参考博客