1.0.1 • Published 6 years ago
vue-datasheet v1.0.1
vue-datasheet
满足基本excel功能的vue插件
npm install vue-datasheet --save
Options
| 选项 | 类型 | 描述 |
|---|---|---|
| data | Array | 二维数组,每个元素的属性会传递给对应单元格 |
| valueRenderer | func | 渲染单元格的方法: function(cell, i, j) |
| onChange | func | 发生变化的回调函数: function(cell, i, j, newValue) {} |
| onPaste | func | 粘贴的回调函数: function(array) {} |
| onContextMenu | func | 鼠标右键的上下文菜单回调: function(event, cell, i, j) |
| parsePaste | func | function (string) {} 粘贴时对内容字符串处理的回调函数 |
Cell Options
The cell object is what gets passed back to the onChange callback. They can contain the following options as well
| Option | Type | Default | Description |
|---|---|---|---|
| readOnly | Bool | false | Cell will never go in edit mode |
| key | String | undefined | By default, each cell is given the key of col number and row number. This would override that key |
| className | String | undefined | Additional class names for cells. |
| component | ReactElement | undefined | Insert a react element or JSX to this field. This will render on edit mode |
| forceComponent | bool | false | Renders what's in component at all times, even when not in edit mode |
| disableEvents | bool | false | Makes cell unselectable and read only |
| colSpan | number | 1 | The colSpan of the cell's td element |
| rowSpan | number | 1 | The rowSpan of the cell's td element |
| width | number or String | undefined | Sets the cell's td width using a style attribute. Number is interpreted as pixels, strings are used as-is. Note: This will only work if the table does not have a set width. |
| overflow | 'wrap'|'nowrap'| 'clip' | undefined | How to render overflow text. Overrides grid-level overflow option. |