跳到正文

这是开发版文档,跟随主分支更新,可能包含尚未发布的功能。

电子表格 ​

@dou-ui/sheet 提供电子表格 DouSheet,用于预算表、排班表、数据录入这类按单元格填写的界面。只需要按列展示一组记录时,使用 Table 表格。

完整的页面示例见区块部门预算和门店排班。

安装 ​

电子表格是单独的包,需要和 dou-ui 一起安装:

sh
bun add dou-ui @dou-ui/sheet

引入样式,再注册组件:

ts
import 'dou-ui/style.css'
import '@dou-ui/sheet/style.css'
import { DouSheet } from '@dou-ui/sheet'

app.use(DouSheet)

基础用法 ​

v-model 绑定一个工作簿:sheets 是工作表列表,每张表的 cells 是按行排列的二维数组。只有值的单元格直接写值,需要样式或数字格式时写成对象。完整的格式见文档数据。

A
B
C
D
E
F
G
H
I
J
K
1
项目
数量
单价
小计
负责人
日期
2
大巴往返
2
¥1,800
¥3,600
戴兜
11月14日
3
午餐
36
¥85
¥3,060
阿青
11月14日
4
场地
1
¥4,200
¥4,200
戴兜
11月14日
5
纪念品
36
¥48.50
¥1,746.00
小周
11月10日
6
7
合计
¥12,606.00
8
占年度预算
31.5%
9
10
11
12
13
14
15
16
17
18
19
20
21
方向键移动,Shift 加方向键扩大选区,输入内容或按 F2 编辑,Enter 确认,Esc 取消,Delete 清空。勾选框按空格切换,Alt 加下方向键展开选项。
  • 数字、日期和时间靠右,文字靠左,TRUE / FALSE 居中。
  • 没有数字格式的数字放不下时,先减少小数位,再改用科学计数法(如 1.23E+11)显示,加宽列后恢复。对齐和这些显示方式都不改变值本身。

只读 ​

readonly 让使用者只能选择、浏览和复制,不能修改。代码调用组件实例的 transact、undo、redo 不受 readonly 限制,见用代码修改。

外观 ​

  • rowHeight、colWidth 设置默认的行高和列宽。
  • headers 控制是否显示列标和行号,gridlines 控制单元格之间的细线,outline 控制分组的大纲栏。
  • 表格默认高 480px,用 style 或 CSS 修改。

冻结行列 ​

工作表的 freeze 让前几行、前几列在滚动时固定在顶部和左侧,适合表头和名称列。滚动之后,冻结的边线旁会出现一道浅阴影。

A
B
C
D
E
F
G
H
I
J
K
L
1
门店
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
2
静安店 1 组
80,000
107,244
111,279
90,234
65,296
61,232
83,618
113,710
125,681
110,364
83,679
3
徐汇店 1 组
84,234
59,296
55,232
77,618
107,710
119,681
104,364
77,679
66,000
81,903
112,605
4
浦东店 1 组
71,618
101,710
113,681
98,364
71,679
60,000
75,903
106,605
125,718
117,509
91,363
5
虹口店 1 组
92,364
65,679
54,000
69,903
100,605
119,718
111,509
85,363
67,158
75,470
104,496
6
长宁店 1 组
63,903
94,605
113,718
105,509
79,363
61,158
69,470
98,496
123,388
123,100
99,734
7
闵行店 1 组
99,509
73,363
55,158
63,470
92,496
117,388
117,100
93,734
70,613
70,833
96,029
8
宝山店 1 组
57,470
86,496
111,388
111,100
87,734
64,613
64,833
90,029
118,877
126,691
108,127
9
杨浦店 1 组
105,100
81,734
58,613
58,833
84,029
112,877
120,691
102,127
76,091
68,359
87,879
10
静安店 2 组
52,833
78,029
106,877
114,691
96,127
70,091
62,359
81,879
112,543
127,997
115,872
11
徐汇店 2 组
108,691
90,127
64,091
56,359
75,879
106,543
121,997
109,872
83,155
68,247
80,694
12
浦东店 2 组
50,359
69,879
100,543
115,997
103,872
77,155
62,247
74,694
104,891
126,914
122,353
13
虹口店 2 组
109,997
97,872
71,155
56,247
68,694
98,891
120,914
116,353
91,241
70,504
75,047
14
长宁店 2 组
50,247
62,694
92,891
114,914
110,353
85,241
64,504
69,047
96,531
123,527
127,054
15
闵行店 2 组
108,914
104,353
79,241
58,504
63,047
90,531
117,527
121,054
99,707
74,952
71,387
16
宝山店 2 组
52,504
57,047
84,531
111,527
115,054
93,707
68,952
65,387
88,129
118,107
129,599
17
杨浦店 2 组
105,527
109,054
87,707
62,952
59,387
82,129
112,107
123,599
107,878
81,236
70,007
18
静安店 3 组
56,952
53,387
76,129
106,107
117,599
101,878
75,236
64,007
80,353
111,085
129,786
19
徐汇店 3 组
100,107
111,599
95,878
69,236
58,007
74,353
105,085
123,786
115,102
88,856
71,016
20
浦东店 3 组
63,236
52,007
68,353
99,085
117,786
109,102
82,856
65,016
73,825
103,021
127,601
21
虹口店 3 组
93,085
111,786
103,102
76,856
59,016
67,825
97,021
121,601
120,805
97,203
74,334
方向键移动,Shift 加方向键扩大选区,输入内容或按 F2 编辑,Enter 确认,Esc 取消,Delete 清空。勾选框按空格切换,Alt 加下方向键展开选项。

工具栏的冻结按钮可以冻结首行、首列,或冻结到当前单元格,见工具栏。

大量数据 ​

表格横向和纵向都只渲染看得见的单元格。下面是 1 万行 × 20 列、共 20 万个单元格的表:

A
B
C
D
E
F
G
H
I
J
K
L
1
第 1 行
13
26
39
52
65
78
91
104
117
130
143
2
第 2 行
20
33
46
59
72
85
98
111
124
137
150
3
第 3 行
27
40
53
66
79
92
105
118
131
144
157
4
第 4 行
34
47
60
73
86
99
112
125
138
151
164
5
第 5 行
41
54
67
80
93
106
119
132
145
158
171
6
第 6 行
48
61
74
87
100
113
126
139
152
165
178
7
第 7 行
55
68
81
94
107
120
133
146
159
172
185
8
第 8 行
62
75
88
101
114
127
140
153
166
179
192
9
第 9 行
69
82
95
108
121
134
147
160
173
186
199
10
第 10 行
76
89
102
115
128
141
154
167
180
193
206
11
第 11 行
83
96
109
122
135
148
161
174
187
200
213
12
第 12 行
90
103
116
129
142
155
168
181
194
207
220
13
第 13 行
97
110
123
136
149
162
175
188
201
214
227
14
第 14 行
104
117
130
143
156
169
182
195
208
221
234
15
第 15 行
111
124
137
150
163
176
189
202
215
228
241
16
第 16 行
118
131
144
157
170
183
196
209
222
235
248
17
第 17 行
125
138
151
164
177
190
203
216
229
242
255
18
第 18 行
132
145
158
171
184
197
210
223
236
249
262
19
第 19 行
139
152
165
178
191
204
217
230
243
256
269
20
第 20 行
146
159
172
185
198
211
224
237
250
263
276
21
第 21 行
153
166
179
192
205
218
231
244
257
270
283
方向键移动,Shift 加方向键扩大选区,输入内容或按 F2 编辑,Enter 确认,Esc 取消,Delete 清空。勾选框按空格切换,Alt 加下方向键展开选项。
  • 修改只复制改动的那一行,其余行原样共享,所以只有改动的行会重新绘制。
  • 每次修改都返回新的行数组,不改动原来的数据,所以用 shallowRef 保存工作簿即可。用 ref 也能正常工作。

API ​

Sheet Props ​

名称说明类型默认值
v-model工作簿,见文档数据SheetWorkbook—
v-model:selection选区,见选择与编辑SheetSelection—
v-model:activeSheet显示的工作表的序号,见工作表number0
readonly只读:可以选择和复制,不能修改booleanfalse
rowHeight默认行高(px)number28
colWidth默认列宽(px)number96
headers显示列标和行号booleantrue
outline显示分组的大纲栏,见分组booleantrue
gridlines显示单元格之间的细线booleantrue
historyDepth最多能撤销多少步number100
menu修改右键菜单,见右键菜单(items, context) => SheetMenuItem[]—
extensions扩展,见扩展(SheetExtension | SheetExtension[])[][]
fileDrop拖到表格上的文件用导入器读入,见导入导出booleanfalse
v-model:comments所有讨论,见评论CommentThread[]—
author当前用户,见评论CommentAuthor—
v-model:activeComment打开的讨论,见评论string | null—
commentable能否发起和回复讨论booleantrue
compare要对比的旧版本,见历史版本SheetWorkbook | null—
ariaLabel表格的无障碍名称string—
messages覆盖表格的文案,只需写要改的部分SheetMessagesOverride—

Sheet Events ​

名称说明参数
transaction每次修改后触发,包括撤销和重做,见用代码修改(tr: SheetTransaction)
transactionCancel修改被保护或扩展取消时触发(tr: SheetTransaction)
paste粘贴之前触发,见复制与粘贴(event: SheetPasteEvent)
linkOpen打开链接之前触发,见链接(event: SheetLinkOpenEvent)
import读完文件、写入之前触发,见导入导出(event: SheetImportEvent)
fileError导入或导出失败时触发,见导入导出(event: SheetFileErrorEvent)
commentAction在表格里对讨论做了一次修改,见评论(action: CommentAction)

Sheet Slots ​

名称说明
header表格上方,放工具栏或编辑栏;里面的组件可以用 useSheet() 拿到表格的状态
footer表格下方,放工作表标签

Sheet Exposes ​

名称说明
transact(run, meta?)在一个事务里修改,返回这次的事务,见用代码修改
undo()、redo()撤销、重做,返回是否执行
canUndo、canRedo能否撤销、重做
commands执行和查询命令,见命令
select(target)选中一个区域并滚动到那里,如 'A1:C4'、'B:B'
scrollTo(cell)把单元格滚动到可见处
showSheet(sheet)按序号、id 或名字切换工作表,没有这个工作表时返回 false
edit(cell?)打开单元格的编辑框,默认当前单元格
editNote(cell?)、editLink(cell?)打开批注、链接的输入框,见批注与链接
focus()让表格获得焦点
copy()、cut()、paste(clip?)复制、剪切、粘贴,见复制与粘贴
openSearch(query?)、closeSearch()打开、关闭查找面板,没有打开或关闭时返回 false,见查找和替换
findCells(query)查找单元格,返回 { sheet, row, col } 列表
findInvalid(sheet?)不符合数据验证的单元格,见数据验证
toCSV(options?)当前(或 sheet 指定的)工作表转成 CSV 文本,见CSV
exportSVG(options?)、exportPNG(options?)导出图片,见导出图片与打印
print(options?)打印整张工作表
exportFile、saveFile、importFile导出、导出并下载、导入文件,见导入导出
comment(cell?)、getCommentAnchors()打开讨论(打不开时返回 false)、读取讨论所在的单元格,见评论
restore(book)、nextChange()、previousChange()恢复版本、在对比中跳到下一处或上一处改动,见历史版本