SOURCE

new Vue({
    el: '#app',
    data() {
        return {
            options: {
                cols: 6,
                rows: 7,
                data: [
                    { content: '测试777', class: 'test', merge: { row: 3, col: 0, rowspan: 3 } },
                    { content: '测试100', class: 'test', merge: { row: 3, col: 2, rowspan: 2, colspan: 2 } },
                    { content: '测试200', class: 'test', merge: { row: 0, col: 0, rowspan: 3, colspan: 3 } },
                    { content: '测试500', class: 'test', merge: { row: 6, col: 2, colspan: 4 } },
                    { content: '测试400', class: 'test', merge: { row: 0, col: 4, colspan: 2 } },
                    { content: '测试600', class: 'test', merge: { row: 1, col: 4, rowspan: 2 } },
                ],
            },
            options2: {
                cols: 8,
                rows: 7,
                data: [
                    { content: '测试1', class: 'test', merge: { row: 0, col: 0, rowspan: 4, colspan: 2 }},
                    { content: '测试3', class: 'test', merge: { row: 0, col: 2, rowspan: 4, colspan: 2 } },
                    { content: '测试3', class: 'test', merge: { row: 0, col: 4, rowspan: 4, colspan: 2 } },
                    { content: '测试8', class: 'test', merge: { row: 2, col: 6, rowspan: 3, colspan: 1 } },
                ],
            },
            options3: {
                cols: 6,
                rows: 7,
                data: [
                    { content: '测试1', class: 'test', merge: { row: 0, col: 0, rowspan: 1, colspan: 6 } },
                    { content: '测试3', class: 'test', merge: { row: 1, col: 0, rowspan: 1, colspan: 4 } },
                    { content: '测试8', class: 'test', merge: { row: 1, col: 4, rowspan: 1, colspan: 2 } },
                    { content: '测试1', class: 'test', merge: { row: 2, col: 0, rowspan: 1, colspan: 2 } },
                    { content: '测试1', class: 'test', merge: { row: 2, col: 2, rowspan: 2, colspan: 1 } },
                    { content: '测试1', class: 'test', merge: { row: 3, col: 3, rowspan: 1, colspan: 2 } },
                    { content: '测试3', class: 'test', merge: { row: 4, col: 0, rowspan: 1, colspan: 4 } },
                    { content: '测试8', class: 'test', merge: { row: 4, col: 4, rowspan: 1, colspan: 2 } },
                    { content: '测试1', class: 'test', merge: { row: 5, col: 0, rowspan: 1, colspan: 6 } },
                ],
            },
        }
    },
    methods: {
        // 当前点击的数据 行数据 行索引 列索引
        handleClick(data, rowData, row, col) {
            console.log(data)
            console.log(rowData)
            console.log(row)
            console.log(col)
        },
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-mergeable-table@1.0.9
"></script>
<div id="app">
    <vue-mergeable-table :options="options" @click="handleClick"></vue-mergeable-table>
    <vue-mergeable-table :options="options2" @click="handleClick"></vue-mergeable-table>
    <vue-mergeable-table :options="options3" @click="handleClick"></vue-mergeable-table>
</div>

body {
    background: #fff;
}
#app {
    display: flex;
    flex-wrap: wrap;
}
.test {
    background: lightblue;
    color: #fff;
}
table {
    margin-bottom: 20px;
    margin-left: 20px;
}