1.1.5 • Published 1 year ago
qcc-editable-table v1.1.5
qcc-editable-table
介绍
表格实时在线编辑插件，支持部分excel操作。
样例
开始
npm install qcc-editable-table --save使用
import qccEditableTable from 'qcc-editable-table';
Vue.use(qccEditableTable)快捷键说明
| 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+Y | 重做上一个动作 |
参数说明
| 名称 | 是否必填 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
| 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 | 是否允许手动调整列宽 |
事件说明
| 名称 | 说明 | 返回参数 |
|---|---|---|
| removeColumn | 删除列 | 返回删除得列名 |
| updateColumn | 更新列名 | 返回更新前，后 列名 |
| addColumn | 新增列 | 返回新增得列明 |
样例
<qccEditableTable
: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"
></qccEditableTable>