Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/woai3c/vue-mergeable-table
根据数据动态生成可合并行列的表格
https://github.com/woai3c/vue-mergeable-table
Last synced: 7 days ago
JSON representation
根据数据动态生成可合并行列的表格
- Host: GitHub
- URL: https://github.com/woai3c/vue-mergeable-table
- Owner: woai3c
- License: mit
- Created: 2020-07-17T03:47:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T04:11:34.000Z (3 months ago)
- Last Synced: 2024-09-15T18:15:45.725Z (2 months ago)
- Language: Vue
- Homepage:
- Size: 610 KB
- Stars: 8
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 简介
可以根据数据动态生成可合并行列的表格。
## 文档
### [在线 DEMO](http://jsrun.net/xmvKp/edit)
### 数据选项
#### options
数据选项有 3 个字段要注意：
1. conten，单元格内容字段
2. class，单元格类名字段
3. merge，这是一个对象，数据为要合并表格的相关数据。它也有一个 class 字段，并且它会覆盖第 2 点中的 class 字段，优先级较高。
#### highlight
高亮属性，鼠标移动到单元格时，单元格背景颜色改变。
```js
options: {
cols: 6, // 要生成的表格列数
rows: 7, // 要生成的表格行数 这个表是 7 * 6
data: [ // 表格数据，生成表格后将数据按顺序一一填充到表格
{ content: '测试1', id: 10, a: 100, b: 100, class: 'test' }, // 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` 事件，事件回调函数参数格式：
```js
// 当前点击的数据 行数据 行索引 列索引，返回的行数据 行索引 列索引均以合并后的表格为准
handleClick(data, rowData, row, col) {
console.log(data)
console.log(rowData)
console.log(row)
console.log(col)
},
```
### 注意事项
假设你创建了一个 `4*4` 的表格，如下图所示。
现在每一行你都合并了 3 列，这时表格会发生崩溃现象。
这是表格自身的问题，和组件无关。要解决此问题，只需再加一行没有合并的表格把表格撑开即可。
## 使用
### 在单文件组件中引用
```
npm i vue-mergeable-table
```
```js
import VueMergeableTable from 'vue-mergeable-table'
Vue.use(VueMergeableTable)
```
```html
// 或者
```
### 在HTML文件中直接引用
使用的是dist目录中的 `vue-mergeable-table.js`
```html
```