vue-mergeable-table 動態生成的可合併行列的表格
阿新 • • 發佈:2020-07-18
專案地址
可以根據資料動態生成可合併行列的表格。
文件
資料選項
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>