vue-quokit 0.1.5 → 0.1.7
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 +67 -0
- package/dist/index.cjs +8 -8
- package/dist/index.mjs +1989 -1788
- 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`？可以只拿列设计器 / 头设计器 / 汇总设计器：
|