代碼實(shí)現(xiàn)

<template>
    <el-table :data="processedData" :span-method="handleSpan" border @selection-change="handleSelectionChange"
        style="width: 100%">
        <!-- 復(fù)選框列 -->
        <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>

        <!-- 動態(tài)其他列 -->
        <el-table-column v-for="(col, index) in columns" :key="index" :label="col.label" :prop="col.prop">
            <template #default="{ row }">
                <!-- 數(shù)據(jù)行顯示內(nèi)容 -->
                <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 {
            // 原始數(shù)據(jù)
            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: {
        // 處理數(shù)據(jù)：插入備注行
        processData() {
            this.processedData = [];
            this.originalData.forEach(item => {
                // 插入數(shù)據(jù)行
                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]
                }
            }
        },
        /** 多選框選中數(shù)據(jù) */
        handleSelectionChange(selection) {
            console.log("選中數(shù)據(jù)", selection)
        }
    }
};
</script>

效果圖

image.png