vue-mergeable-table 動態生成的可合並行列的表格

項目地址

可以根據數據動態生成可合並行列的表格。

文檔

數據選項

options: {
    cols: 6, // 要生成的表格列數
    rows: 7, // 要生成的表格行數 這個表是 7 * 6
    data: [ // 表格數據，生成表格后將數據按順序一一填充到表格
        { content: '測試1', id: 10, a: 100, b: 100 }, // content 字段為表格的內容
        // 需要合並的數據需要填入一個 merge 對象
        // row col 為起始行列，rowspan 和 colspan 為合並的行數，值默認為 1，為 1 時可以不填
        // 這代表這個數據要放在 row 為 3，col 為 1 的單元格上，並且占 3 行 1列
        { content: '測試2', merge: { row: 3, col: 0, rowspan: 3 } },
        { content: '測試3' },
    ],
},

事件

組件可監聽 click 事件，回調函數事件參數格式：

// 當前點擊的數據 行數據 行索引 列索引，返回的行數據 行索引 列索引均以合並后的表格為准
handleClick(data, rowData, row, col) {
    console.log(data)
    console.log(rowData)
    console.log(row)
    console.log(col)
},

在線 DEMO

注意事項

假設你創建了一個 4*4 的表格，如下圖所示。

現在每一行你都合並了 3 列，這時表格會發生崩潰現象。

這是表格自身的問題，和組件無關。要解決此問題，只需再加一行沒有合並的表格即可。

使用

在單文件組件中引用

npm i vue-mergeable-table

import VueMergeableTable from 'vue-mergeable-table'

Vue.use(VueMergeableTable)

<template>
    <div id="app">
        <VueMergeableTable :options="options" @click="handleClick" />
        // 或者 <vue-mergeable-table :options="options"/>
    </div>
</template>

在HTML文件中直接引用

使用的是dist目錄中的 vue-mergeable-table.js

<div id="app">
    <vue-mergeable-table :options="options" @click="handleClick"></vue-mergeable-table>
</div>