vue-quokit 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -0
- package/dist/index.cjs +8 -8
- package/dist/index.mjs +1526 -1373
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -83,6 +83,73 @@ const sheetRef = ref(null);
|
|
|
83
83
|
</script>
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
## ⚙️ 全局配置
|
|
87
|
+
|
|
88
|
+
通过 `setConfig` 自定义设计器 UI，**所有字段都是可选的**，不传就用默认值。调用一次即可，任意位置都行（`main.js` 或业务代码里）。
|
|
89
|
+
|
|
90
|
+
```js
|
|
91
|
+
import { setConfig, getConfig, resetConfig } from 'vue-quokit';
|
|
92
|
+
|
|
93
|
+
// 批量设置（深合并）
|
|
94
|
+
setConfig({
|
|
95
|
+
templateCols: {
|
|
96
|
+
layout: 'auto',
|
|
97
|
+
minWidth: 960,
|
|
98
|
+
columns: [
|
|
99
|
+
// 只配置你想改的列，没写的自动保留默认
|
|
100
|
+
{ key: 'editorCfg', label: '专属配置' }, // 没写 width → 弹性列（吃富余空间）
|
|
101
|
+
{ key: 'ops', label: '操作', width: 160 },
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
// 查看当前配置
|
|
107
|
+
console.log(getConfig());
|
|
108
|
+
|
|
109
|
+
// 重置回默认
|
|
110
|
+
resetConfig();
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### `templateCols` 配置项
|
|
114
|
+
|
|
115
|
+
控制**表头列设计器**那张表的外观。
|
|
116
|
+
|
|
117
|
+
| 字段 | 类型 | 默认 | 说明 |
|
|
118
|
+
|---|---|---|---|
|
|
119
|
+
| `layout` | `'auto'` \| `'fixed'` | `'auto'` | `auto` = 自适应容器宽度，窄屏出横向滚动条；`fixed` = 严格按 `columns[i].width` 分配，没写 width 的列自动吃剩余空间 |
|
|
120
|
+
| `minWidth` | `number` | `960` | 表格最小宽度（px）。容器小于此值时出横向滚动条，大于时撑满 |
|
|
121
|
+
| `columns` | `ColConfig[]` | 见下 | 表头列定义，按数组顺序渲染 |
|
|
122
|
+
|
|
123
|
+
### `columns` 每项
|
|
124
|
+
|
|
125
|
+
| 字段 | 类型 | 说明 |
|
|
126
|
+
|---|---|---|
|
|
127
|
+
| `key` | `string` | 唯一标识，固定 9 个：`idx`、`field`、`title`、`editor`、`width`、`editorCfg`、`merge`、`style`、`ops` |
|
|
128
|
+
| `label` | `string` | 表头显示文字 |
|
|
129
|
+
| `width` | `number` | 列宽（px）。**不写就是弹性列**，`auto` 模式下按内容自适应，`fixed` 模式下吃掉剩余空间 |
|
|
130
|
+
|
|
131
|
+
### 默认值
|
|
132
|
+
|
|
133
|
+
```js
|
|
134
|
+
{
|
|
135
|
+
templateCols: {
|
|
136
|
+
layout: 'auto',
|
|
137
|
+
minWidth: 960,
|
|
138
|
+
columns: [
|
|
139
|
+
{ key: 'idx', label: '#', width: 50 },
|
|
140
|
+
{ key: 'field', label: '字段名', width: 150 },
|
|
141
|
+
{ key: 'title', label: '列标题', width: 200 },
|
|
142
|
+
{ key: 'editor', label: '类型', width: 140 },
|
|
143
|
+
{ key: 'width', label: '宽度', width: 100 },
|
|
144
|
+
{ key: 'editorCfg', label: '专属配置' },
|
|
145
|
+
{ key: 'merge', label: '分组时合并',width: 120 },
|
|
146
|
+
{ key: 'style', label: '设置', width: 80 },
|
|
147
|
+
{ key: 'ops', label: '操作', width: 140 },
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
86
153
|
## 🧩 单独使用某个模块
|
|
87
154
|
|
|
88
155
|
不想用整个 `QuokitTemplate`？可以只拿列设计器 / 头设计器 / 汇总设计器：
|
|
@@ -158,6 +225,37 @@ const colsState = useColumns([
|
|
|
158
225
|
| `exportExcel(expandRowHeight?)` | 导出 `.xlsx`，可选撑长模式 |
|
|
159
226
|
| `print(vertical?)` | 打印，可选竖版 |
|
|
160
227
|
|
|
228
|
+
### `<QuokitPreview>`
|
|
229
|
+
|
|
230
|
+
一键弹出预览弹窗，内置导出 Excel / 打印 / 查看 JSON 按钮组。
|
|
231
|
+
|
|
232
|
+
| prop | 类型 | 默认 | 说明 |
|
|
233
|
+
|---|---|---|---|
|
|
234
|
+
| `tpl` | `QuokitTemplateData` | — | **必填**，模板对象 |
|
|
235
|
+
| `data` | `Object` | `{ headerData: {}, rows: [], footerData: {} }` | 数据对象 |
|
|
236
|
+
| `config` | `Object` | 见下 | 控制按钮显示 |
|
|
237
|
+
|
|
238
|
+
**config 字段：**
|
|
239
|
+
|
|
240
|
+
| 字段 | 类型 | 默认 | 说明 |
|
|
241
|
+
|---|---|---|---|
|
|
242
|
+
| `title` | `string` | `'👁️ 总体预览'` | 弹窗标题 |
|
|
243
|
+
| `excel` | `boolean` | `true` | 显示两个导出 Excel 按钮（普通 / 撑长） |
|
|
244
|
+
| `print` | `boolean` | `true` | 显示两个打印按钮（横版 / 竖版） |
|
|
245
|
+
| `json` | `boolean` | `true` | 显示两个 JSON 按钮（模板 / 数据） |
|
|
246
|
+
|
|
247
|
+
**Events：** `close` — 用户关闭弹窗时触发
|
|
248
|
+
|
|
249
|
+
### `openPreviewStatic(tpl, data?, config?)`
|
|
250
|
+
|
|
251
|
+
命令式调用，一行代码弹出预览。自动挂载到 `document.body`，关闭时自动卸载。
|
|
252
|
+
|
|
253
|
+
```js
|
|
254
|
+
import { openPreviewStatic } from 'vue-quokit';
|
|
255
|
+
|
|
256
|
+
openPreviewStatic(tpl, data, { excel: true, print: false, json: false });
|
|
257
|
+
```
|
|
258
|
+
|
|
161
259
|
### Composables
|
|
162
260
|
|
|
163
261
|
#### `useColumns(initialColumns?, initialGroupRules?)`
|
|
@@ -213,6 +311,8 @@ src/components/vue-quokit/
|
|
|
213
311
|
│ │ └── schema.js
|
|
214
312
|
│ └── preview/ ← 渲染域
|
|
215
313
|
│ ├── QuokitSheet.vue
|
|
314
|
+
│ ├── QuokitPreview.vue
|
|
315
|
+
│ ├── usePreview.js
|
|
216
316
|
│ └── mockData.js
|
|
217
317
|
│
|
|
218
318
|
├── shared/ ← 跨域共享
|