vue-json-table/README.md

convert json to table format package

# qcc-json-table

# 介绍
表格实时在线编辑插件，支持部分excel操作。


# 样例

![Alt text](./public/table.gif)

# 开始

```javascript
npm install vue-json-table --save
```

# 使用
```javascript
import VueJsonTable from 'vue-json-table';
Vue.use(VueJsonTable)
```


# 快捷键说明

|  key    | 说明  | 
  |  ----   | ----  |
| 方向键    | 向上、向下、向左或向右移动一个单元格 |
| Ctrl+↑   | 移动到当前列的第一个单元格 |
| Ctrl+↓  | 移动到当前列的最后一个单元格 |
| Ctrl+←  | 移动到当前行最左边的单元格 |
| Ctrl+→  | 移动到当前列的最后一个单元格 |
| F2  | 进入活动单元格的编辑模式 |
| 字母数字键  | 移动到当前列的最后一个单元格 |
| Tab  | 移动到下一个单元格*（如果只有一列可用，则向下移动一个单元格） |
| Shift+Tab  | 移动到上一个单元格*（如果只有一列可用，则向上移动一个单元格） |
| Home  | 移动到当前行的第一个非冻结单元格 |
| Ctrl+Home  | 移动到网格的第一个非冻结单元格 |
| End | 移动到当前行的最后一个非冻结单元格 |
| Ctrl+End  | 移动到网格的最后一个非冻结单元格 |
| Page Up  | 向上移动一个屏幕 |
| Page Down  | 向下移动一个屏幕 |
| Ctrl+A  | 选择所有单元格和标题 |
| Ctrl+ Shift+↑  | 将选择范围扩展到当前列的第一个单元格 |
| Ctrl+ Shift+↓  | 将选择范围扩展到当前列的最后一个单元格 |
| Ctrl+ Shift+←  | 将选择范围扩展到当前行最左边的单元格 |
| Ctrl+ Shift+→ | 将选择范围扩展到当前行最右边的单元格 |
| Shift+ 方向键  | 将所选内容扩展一个单元格 |
| Shift+Home  | 将选择范围扩展到当前行的第一个非冻结单元格 |
| Shift+End  | 将选择范围扩展到当前行的最后一个非冻结单元格 |
| Delete	   | 清除所选单元格的内容 |
| Ctrl+X	   | 将选中单元格的内容剪切到系统剪贴板 |
| Ctrl+C	   | 将所选单元格的内容复制到系统剪贴板	 |
| Ctrl+V	   | 从系统剪贴板粘贴 |
| Ctrl+Z	   | 撤消上一个操作 |
| Ctrl+ Shift +Z| 一次撤消上一个批量操作 |
| Ctrl+Y	   | 重做上一个动作 |
| Alt+左键      | 选中列头      |

# 参数说明
|  名称   | 是否必填  | 类型  |默认值| 说明        |
  |  ----   |  ----   | ----  | ----  | ----      |
| jsonData|    是   |  Array | [] |  json数组   |
| width|    否   |  Number/String | 100% |  表格宽度(支持百分比)   |
| height|    否   |  Number/String |  auto   |表格高度(不支持百分比) |
| colWidths|    否   |  Array/String/Number | 100 |  列宽 (为每列设置相同的宽度) |
| showRowsNum|    否   |  Boolean | false|  显示行号   |
| fixColumnIndex|    否   |  Number | 0 | 列固定索引位置   |
| stretchH|    否   |  String | 'all' ('last'， 'none') |  拉伸列使网格适合容器   |
| multiColumnSorting|    否   | Boolean| true |  是否允许列排序   |
| manualColumnResize|    否   | Boolean|  true |  是否允许手动调整列宽   |
| className|    否   | String|  "" |  自定义cell样式   |
| showTitle|    否   | Boolean|  false |  是否显示cell title   |
| highlights|    否   | Array|  [] |  高亮列头   |
| repeatHighlightsCell|    否   | Array|  [] |  高亮列重复值   |
| cellClickFlag|    否   | Boolean|  false |  是否启动单元格点击回调   |
| unNumberList|    否   | Array|  [] |  非数值高亮,除 unNumberList 以外其他字段高亮  |
| aliasList|    否   | Array|  [] |  别名高亮,除 aliasList 以外其他字段高亮    |
| readModel|    否   | Boolean|  false |  阅读模式   |
| dropdownMenu|    否   | Boolean|  false |  高级下拉菜单   |
| showErrorIcon| 否 | String | "" | 开启质检功能 |
| onlyChangeData| 否 | Boolean | false | 仅可修改、删除、新增行数据|
| widthAutoResizeObj |否| Object |<pre>{</br>"autoResize": false, // 宽度是否自适应 </br>"sampleSize": 1,// 数组截断长度</br>"separate": true, // 是否区分 汉字 和 非汉字</br>"charStep": 1, // 字符步长</br>"hzCharStep": 1.9, // 汉字步长</br>"maxLimitSize": 50, // 字符长度峰值</br>"minLimitSize": 5, // 字符长度谷值</br>"scale": 9, // 扩张比例（px）</br>"minWidth": 60, // 低于指定宽度最小宽度</br>"maxWidth": 400 //超过指定字符长度最大宽度</br>}</pre>||
| dateColHighlight  | 否 | Object | {} | 日期型列高亮 |
| seqHeaders  | 否 | Array | [] | 列头顺序，支持部分列排序，不存在的列名会被自动过滤 |
| autoTableHeight  | Boolean | true | [] | 表头固定 |
| minTableHeight  | 否 | Number | 80 | 列头顺序，支持部分列排序，不存在的列名会被自动过滤 |
| maxTableHeight  | 否 | Number | 550 | 列头顺序，支持部分列排序，不存在的列名会被自动过滤 |




# 事件说明
|  名称           | 说明      | 返回参数                                 |
  |  ----           | ----      | ----                                    |
|  removeColumn   | 删除列     | 返回删除得列名                           |
|  updateColumn   | 更新列名   | 返回更新前，后 列名                       |
|  addColumn      | 新增列     | 返回新增得列明                           |
|  cellClick      |单元格点击  |返回单元格索引（row， col）位置以及单元格内容|



# 样例
```html
 <VueJsonTable
    :jsonData="[...data]"
    v-model="data"
    :width="width"
    :height="height"
    :colWidths="colWidths"
    :stretchH="stretchH"
    :multiColumnSorting="multiColumnSorting"
    :fixColumnIndex="fixColumnIndex"
    :manualColumnResize="manualColumnResize"
    @removeColumn="removeColumn"
    @updateColumn="updateColumn"
    @addColumn="addColumn"
    ></VueJsonTable>
  ```