@aurouscia/au-table-editor

au-table-editor

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

本仓库现已合并 .NET Core SDK，nuget 包源码位于 nuget/ 目录下。

English: see README.en.md

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  
pnpm install --frozen-lockfile
pnpm 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 Core SDK

nuget 包：Aurouscia.TableEditor.Core
源码位于本仓库 nuget/ 目录下，包含类型定义和 xlsx 导入导出。
原独立仓库已废弃，请使用本仓库。

缺陷

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