@aurouscia/au-table-editor NPM

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

English: see README.en.md

Have nothing to do with "au-table" package

preview

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

注意：这是个【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 示例父级文件-->

注意

要永久保存数据，需要架设一个后端并把数据post给后端保存
要控制其尺寸，需要父元素是position非static的元素
保存务必使用@save提供的值，不要使用传入的对象，该对象可能并不与表格当前状态一致
要去除底部栏的信息，只需向组件传递 :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}] //合并组位置和尺寸
}