# au-table-editor
基于vue的表格编辑器，支持单元格合并  
（与au-table包无关） 

### **English: see README.en.md**  

![preview](https://gitee.com/au114514/au-table-editor/raw/develop/preview.png)

1. 单元格合并
2. 移动端可用
3. 撤销/重做
4. ts类型定义
5. (较为)完整的单元测试

**注意：这是个【vue组件】，只能在vue项目里使用**

*作者水平有限，谨慎使用*  

## 用法
```
npm install @aurouscia/au-table-editor

import { AuTableEditor, AuTableData } from '@aurouscia/au-table-editor'  
//"AuTableData"是编辑器的数据类型，写ts才需要引入  
import '@aurouscia/au-table-editor/style.css' 
//引入其样式

//必须在数据就绪后再让组件加载，未就绪前应使用v-if避免其加载
<AuTableEditor v-if="loadComplete" :table-data="【传入初始数据】" @save="【保存数据并返回状态(是否成功)】">
</AuTableEditor>

<!--见源代码中的 src/DemoParent.vue 示例父级文件-->
```
## 注意
1. 要永久保存数据，需要架设一个后端并把数据post给后端保存  
2. 要控制其尺寸，需要父元素是position非static的元素  
3. 保存务必使用`@save`提供的值，不要使用传入的对象，该对象可能并不与表格当前状态一致
4. 要去除底部栏的信息，只需向组件传递 ```:no-ads="true"``` 属性
## Demo
试用：
```
git clone https://gitee.com/au114514/au-table-editor  
npm install  
npm run dev
```

## 数据格式示例
如果使用ts，直接引入AuTableData即可  
```
{
    id:0,name:"testTable", 
    cells: //单元格数据
    [
        ["表头","","","",""],
        ["1A","1B","1C","1D","1E"],["2A","2B","2C","2D","2E"],["3A","3B","3C","3D","3E"],
        ["4A","4B","4C","4D","4E"],["5A","5B","5C","5D","5E"],["6A","6B","6C","6D","6E"],
        ["7A","7B","7C","7D","7E"],["8A","8B","8C","8D","8E"],["9A","9B","9C","9D","9E"],
    ],
    merges:[{row:0,col:0,right:4,down:0}] //合并组位置和尺寸
}
```

## .net SDK
nuget：Aurouscia.TableEditor.Core  
（只有类型定义和xlsx导入导出）

## 缺陷
1. 新插入的行和列虽然选中了但是菜单没冒出来
2. 菜单如果出现在视野最右边/最下面会导致需要滑动才能看得到完整菜单
3. 点击拖动框选的起点如果在表格缝里就会导致框选失败