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

发布时间 2024-01-08 11:24:32作者: 林财钦

一、背景

业务需求 需要这种

image

二、实现

``

点击查看代码
 <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>

三、遇到的报错

四、参考博客