@aurouscia/au-table-editor
v0.5.9
Published
table editor based on vue with cell merging
Downloads
395
Readme
table editor based on vue with cell merging
基于vue的表格编辑器,支持单元格合并
(与au-table包无关)
English: see README.en.md
Have nothing to do with "au-table" package
- 单元格合并
- 移动端可用
- 撤销/重做
- 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}] //合并组位置和尺寸
}
.net SDK
nuget:Aurouscia.TableEditor.Core
(只有类型定义和xlsx导入导出)
缺陷
- 新插入的行和列虽然选中了但是菜单没冒出来
- 菜单如果出现在视野最右边/最下面会导致需要滑动才能看得到完整菜单
- 点击拖动框选的起点如果在表格缝里就会导致框选失败