代码实现

<template>
    <el-table :data="processedData" :span-method="handleSpan" border @selection-change="handleSelectionChange"
        style="width: 100%">
        <!-- 复选框列 -->
        <el-table-column type="selection" width="55" align="center" />

        <!-- 图片列 -->
        <el-table-column label="图片" width="120" align="center">
            <template #default="{ row }">
                <img v-if="row.type === 'data'" :src="row.img" style="width: 80px; height: 60px; object-fit: cover;" />
            </template>
        </el-table-column>

        <!-- 动态其他列 -->
        <el-table-column v-for="(col, index) in columns" :key="index" :label="col.label" :prop="col.prop">
            <template #default="{ row }">
                <!-- 数据行显示内容 -->
                <span v-if="row.type === 'data'">{{ row[col.prop] }}</span>
                <!-- 备注行显示备注 -->
                <span v-if="row.type === 'remark'">
                    {{ row.remark }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            // 原始数据
            originalData: [
                {
                    id: 1,
                    img: "xxxxx.jpg",
                    name: "张三",
                    age: 30,
                    address: "北京",
                    remark: "这是张三的备注"
                },
                {
                    id: 2,
                    img: "xxxx.jpg",
                    name: "李四",
                    age: 25,
                    address: "上海",
                    remark: "这是李四的备注"
                }
            ],
            processedData: [],
            columns: [
                { label: "姓名", prop: "name" },
                { label: "年龄", prop: "age" },
                { label: "地址", prop: "address" }
            ]
        };
    },
    created() {
        this.processData();
    },
    methods: {
        // 处理数据：插入备注行
        processData() {
            this.processedData = [];
            this.originalData.forEach(item => {
                // 插入数据行
                this.processedData.push({
                    ...item,
                    type: "data"
                });
                // 插入备注行
                this.processedData.push({
                    ...item,
                    type: "remark"
                });
            });
        },

        // 合并单元格逻辑
        handleSpan({ row, column, rowIndex, columnIndex }) {
            if (row.type === 'data') {
                if (columnIndex === 0 || columnIndex === 1) {
                    return { rowspan: 2, colspan: 1 };
                }
            } else if (row.type === 'remark') {
                if (columnIndex === 2) {
                    return {
                        rowspan: 1,
                        colspan: this.columns.length
                    };
                } else {
                    return [0, 0]
                }
            }
        },
        /** 多选框选中数据 */
        handleSelectionChange(selection) {
            console.log("选中数据", selection)
        }
    }
};
</script>

效果图

image.png