@qin-ui/element-plus-pro 1.1.2 → 1.1.4
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/AI-CONTEXT.md +119 -189
- package/README.md +311 -84
- package/api.json +95 -1
- package/bin/init-ai.mjs +224 -113
- package/package.json +5 -5
package/AI-CONTEXT.md
CHANGED
|
@@ -1,241 +1,171 @@
|
|
|
1
|
-
# @qin-ui/element-plus-pro
|
|
1
|
+
# @qin-ui/element-plus-pro
|
|
2
2
|
|
|
3
|
-
基于
|
|
3
|
+
基于 element-plus v2.x（`el-` 前缀）封装的 Schema 驱动组件库。
|
|
4
|
+
用 JS 配置对象描述 UI，不写 `<el-*>` 模板堆叠。ProForm/ProTable 是渲染引擎，所有真实 UI 来自 element-plus。
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## 1. 架构概览
|
|
8
|
-
|
|
9
|
-
### 1.1 三层架构
|
|
6
|
+
## 安装与使用
|
|
10
7
|
|
|
8
|
+
```bash
|
|
9
|
+
pnpm add @qin-ui/element-plus-pro # peerDeps: element-plus ^2.13.6, vue ^3.5
|
|
11
10
|
```
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
│ @qin-ui/element-plus-pro（Schema 解析 + 组件解析）│
|
|
17
|
-
│ 属性分层剥离 → Grid→el-col, FormItem→el-form-item, 剩余→输入控件 │
|
|
18
|
-
├─────────────────────────────────────────────────┤
|
|
19
|
-
│ element-plus（Vue 3 组件库，el- 前缀） │
|
|
20
|
-
│ el-input / el-select / el-date-picker / el-table ...│
|
|
21
|
-
└─────────────────────────────────────────────────┘
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
// 按需引入（推荐）
|
|
14
|
+
import { ProForm, ProTable, useForm, useTable } from '@qin-ui/element-plus-pro';
|
|
22
15
|
```
|
|
23
16
|
|
|
24
|
-
|
|
17
|
+
## 核心心智模型
|
|
25
18
|
|
|
26
|
-
|
|
19
|
+
**1. 配置驱动**：`useForm(数据, Field[])` / `useTable({ columns, searchFields })` 生成实例，组件接收实例。
|
|
27
20
|
|
|
28
|
-
|
|
29
|
-
| :----------------- | :---------------- | :--------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
|
|
30
|
-
| `'input'` | el-input | textarea, password | placeholder, maxlength, clearable, showWordLimit, showPassword, autosize |
|
|
31
|
-
| `'input-number'` | el-input-number | — | min, max, step, precision, controls, placeholder |
|
|
32
|
-
| `'autocomplete'` | el-autocomplete | — | placeholder, clearable, fetchSuggestions, triggerOnFocus |
|
|
33
|
-
| `'select'` | el-select | — | **options**, multiple, filterable, clearable, allowCreate, loading, remote, remoteMethod |
|
|
34
|
-
| `'cascader'` | el-cascader | — | **options**, props, filterable, clearable, showAllLevels |
|
|
35
|
-
| `'date-picker'` | el-date-picker | date, daterange, datetime, datetimerange, week, month, monthrange, year, yearrange | format, valueFormat, disabledDate, clearable, startPlaceholder, endPlaceholder, shortcuts |
|
|
36
|
-
| `'time-picker'` | el-time-picker | — | format, clearable, isRange, startPlaceholder, endPlaceholder |
|
|
37
|
-
| `'time-select'` | el-time-select | — | start, end, step, clearable, minTime, maxTime |
|
|
38
|
-
| `'checkbox-group'` | el-checkbox-group | — | **options**, min, max, disabled |
|
|
39
|
-
| `'radio-group'` | el-radio-group | — | **options**, disabled, size |
|
|
40
|
-
| `'switch'` | el-switch | — | activeText, inactiveText, activeValue, inactiveValue, loading, size |
|
|
41
|
-
| `'slider'` | el-slider | — | min, max, step, showStops, range, marks |
|
|
42
|
-
| `'tree-select'` | el-tree-select | — | **data**, filterable, clearable, checkStrictly, props, multiple, showCheckbox |
|
|
43
|
-
| `'transfer'` | el-transfer | — | **data**, **titles**, filterable, filterMethod, props |
|
|
44
|
-
| `'custom'` | 自定义 | — | component 直接传入 Vue 组件或 h() 渲染函数 |
|
|
21
|
+
**2. 属性分层透传**（最关键）：Field 上的属性被"剥离到不同 DOM 层"，不是全塞给输入控件。写错层就失效：
|
|
45
22
|
|
|
46
|
-
|
|
23
|
+
| 属性 | 落到哪一层 | 说明 |
|
|
24
|
+
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------- | :------------- |
|
|
25
|
+
| `span`/`offset`/`push`/`pull`/`xs`..`xl` | `<el-col>` Grid 层 | 仅 grid 开启时 |
|
|
26
|
+
| `label`/`rules`/`error`/`required`/`size`/`showMessage`/`inlineMessage`/`labelWidth`/`formItemClass`/`formItemStyle`/`formItemDataAttrs` | `<el-form-item>` 层 | 表单项 |
|
|
27
|
+
| `disabled`/`placeholder`/`clearable`/`options`/`filterable`/`multiple`/`maxlength`/`componentClass`/`componentStyle`/`componentDataAttrs` + 该控件其余 element-plus 原生属性 | 输入控件本身（el-input 等） | 其余全部 |
|
|
28
|
+
| `component`/`hidden`/`modelProp`/`valueFormatter`/`fields`/`slots`/`formItemContainer`/`componentContainer`/`extraProps` | ProForm 逻辑消费，**不绑到 DOM** | 框架级 |
|
|
47
29
|
|
|
48
|
-
|
|
30
|
+
> 规则：`span` 给 Grid，`label`/`rules` 给 FormItem，其余给输入控件。
|
|
31
|
+
> **element-plus 命名约定**：用 `clearable`（不是 `allowClear`）、`showWordLimit`（不是 `showCount`）、`autosize`（小写 d）；el-form-item 插槽为 `label` 和 `error`。
|
|
49
32
|
|
|
50
|
-
##
|
|
33
|
+
## 速查
|
|
51
34
|
|
|
52
|
-
Field
|
|
35
|
+
### component 映射（Field.component 字符串 -> element-plus 组件）
|
|
53
36
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</el-form-item>
|
|
59
|
-
</el-col>
|
|
60
|
-
```
|
|
37
|
+
`input`->el-input · `input-number`->el-input-number · `autocomplete`->el-autocomplete · `select`->el-select ·
|
|
38
|
+
`cascader`->el-cascader · `date-picker`->el-date-picker · `time-picker`->el-time-picker · `time-select`->el-time-select ·
|
|
39
|
+
`checkbox-group`->el-checkbox-group · `radio-group`->el-radio-group · `switch`->el-switch · `slider`->el-slider ·
|
|
40
|
+
`tree-select`->el-tree-select · `transfer`->el-transfer · `custom`->用户自定义组件
|
|
61
41
|
|
|
62
|
-
|
|
42
|
+
> `input` 通过 `type` 子类型区分：`type: 'textarea'` 文本域、`type: 'password'` 密码框。
|
|
43
|
+
> `date-picker` 通过 `type` 子类型区分：`date`/`dates`/`daterange`/`datetime`/`datetimerange`/`week`/`month`/`monthrange`/`months`/`year`/`yearrange`/`years`。
|
|
44
|
+
> 写 Field 中输入控件的具体属性前，**属性名/类型以 https://element-plus.org 官方文档为准**。
|
|
63
45
|
|
|
64
|
-
|
|
46
|
+
### 隐式默认行为（INJECT_CONFIG，易踩坑）
|
|
65
47
|
|
|
66
|
-
|
|
48
|
+
由 `ProComponentProvider` 注入，优先级低于 Field 配置。**不写也有这些默认值，需知晓以免行为与预期不符：**
|
|
67
49
|
|
|
68
|
-
|
|
50
|
+
| component | 默认预设 |
|
|
51
|
+
| :-------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
52
|
+
| `switch` | `{ modelProp: 'modelValue' }` -> v-model 绑 `modelValue`（element-plus 惯例，即 `v-model`） |
|
|
53
|
+
| `input` | `{ maxlength: 100, clearable: true, placeholder: '请输入' }` |
|
|
54
|
+
| `input.textarea` | `{ maxlength: 200, autosize: {minRows:3,maxRows:6}, showWordLimit: true, clearable: true, placeholder: '请输入' }` |
|
|
55
|
+
| `input.password` | `{ showPassword: true, maxlength: 100, clearable: true, placeholder: '请输入' }` |
|
|
56
|
+
| `input-number` | `{ max: 1e15-1, min: -(1e15+1), controls: false, placeholder: '请输入', style:{width:'100%'} }` |
|
|
57
|
+
| `autocomplete` | `{ clearable: true, placeholder: '请输入' }` |
|
|
58
|
+
| `select` / `cascader` / `tree-select` | `{ clearable: true, placeholder: '请选择' }` |
|
|
59
|
+
| `date-picker` / `time-picker` / `time-select` | `{ style:{width:'100%'}, placeholder: '请选择' }` |
|
|
60
|
+
| `pro-form` | `{ grid: { gutter: 24 } }` |
|
|
61
|
+
| `pro-form-item` | `{ span: 8 }` |
|
|
62
|
+
| `pro-table` | `{ pagination:{layout:'total, sizes, prev, pager, next, jumper', pageSizes:[10,20,30,40,50,100], background:true}, searchFormConfig:{layout:'grid', expand:{minExpandRows:2, expandStatus:false}}, control:true, addIndexColumn:true }` |
|
|
69
63
|
|
|
70
|
-
|
|
64
|
+
> `modelProp` 控制 v-model 绑定名，element-plus 默认 `'modelValue'`（即 `v-model`）。
|
|
65
|
+
> `date-picker` 支持按 type 子类型分别预设：`date-picker.date` / `.dates` / `.daterange` / `.datetime` / `.datetimerange` / `.week` / `.month` / `.monthrange` / `.months` / `.year` / `.yearrange` / `.years`，范围类型自带 `startPlaceholder`/`endPlaceholder`。
|
|
66
|
+
> `checkbox-group` / `radio-group` / `slider` / `transfer` 无预设（`{}`）。
|
|
71
67
|
|
|
72
|
-
|
|
68
|
+
### 不支持响应式的属性（不能包 ref/computed）
|
|
73
69
|
|
|
74
|
-
|
|
75
|
-
- **ProComponentProvider 已为 `switch` 预设 `modelProp: 'modelValue'`**，通常无需手动指定
|
|
76
|
-
- 自定义场景：`modelProp: 'visible'` → `v-model:visible`
|
|
70
|
+
`component` / `formItemContainer` / `componentContainer` / `valueFormatter` / `fields` / `slots` / `modelProp`。
|
|
77
71
|
|
|
78
|
-
|
|
72
|
+
## 实例成员速查
|
|
79
73
|
|
|
80
|
-
|
|
81
|
-
- el-form-item 插槽为 `label` 和 `error`；其他 slot key 透传到底层输入组件（如 el-input 的 `prefix`/`suffix`/`append`/`prepend`）
|
|
74
|
+
### useForm -- 表单实例
|
|
82
75
|
|
|
83
|
-
|
|
76
|
+
```ts
|
|
77
|
+
useForm(initFormData, Field[], root = true) // 重载一（常用）：初始数据 + 字段配置
|
|
78
|
+
useForm(true | false) // 重载二：仅拿实例（root）
|
|
79
|
+
```
|
|
84
80
|
|
|
85
|
-
|
|
81
|
+
返回 `Form` 实例（**`formData` 是 reactive 对象，不用 `.value`**）：
|
|
86
82
|
|
|
87
|
-
|
|
83
|
+
| 成员 | 说明 |
|
|
84
|
+
| :------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------- |
|
|
85
|
+
| `form.formData` | 响应式数据，可直接读写，支持深层路径 `formData.address.city` |
|
|
86
|
+
| `form.getFormData(path)` | 路径读取；无参返回 `undefined` |
|
|
87
|
+
| `form.setFormData(path, value)` / `setFormData(path, prev=>new)` | 路径写入，支持函数式 |
|
|
88
|
+
| `form.setFormData({...})` / `setFormData(prev => ({...prev, name:'新'}))` | 批量覆盖整个表单，支持函数式（先清空再写入） |
|
|
89
|
+
| `form.fields` | 字段配置数组（Ref） |
|
|
90
|
+
| `form.getField(path)` / `getField(fn)` | 字段查找，支持路径或查找函数；`{all:true}` 返回所有匹配数组 |
|
|
91
|
+
| `form.setField(path, patch)` / `setField(path, prev=>({...}))` | 字段增改查；默认合并，`{updateType:'rewrite'}` 覆盖；支持函数式更新；`{all:true}` 批量更新所有匹配 |
|
|
92
|
+
| `form.deleteField` / `form.appendField` / `form.prependField` / `form.getParentField` | 字段增删查；均支持 `{all:true}`；`appendField(undefined, f)` 末尾追加、`prependField(undefined, f)` 开头插入，入参可为数组 |
|
|
93
|
+
| `form.formRef` | 底层 element-plus Form 实例引用（Ref），`formRef.value?.validate()` / `.resetFields()` |
|
|
88
94
|
|
|
89
|
-
|
|
95
|
+
### useTable -- 表格实例
|
|
90
96
|
|
|
91
97
|
```ts
|
|
92
|
-
|
|
93
|
-
{
|
|
94
|
-
path: 'username',
|
|
95
|
-
component: 'input',
|
|
96
|
-
label: '用户名',
|
|
97
|
-
placeholder: '请输入',
|
|
98
|
-
rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
path: 'password',
|
|
102
|
-
component: 'input',
|
|
103
|
-
type: 'password',
|
|
104
|
-
label: '密码',
|
|
105
|
-
rules: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
106
|
-
},
|
|
107
|
-
]);
|
|
108
|
-
// 模板：<ProForm :form="form" />
|
|
98
|
+
useTable({ columns, data, pageParam, searchParam, searchFields }); // 数据源用 data（非 dataSource）
|
|
109
99
|
```
|
|
110
100
|
|
|
111
|
-
|
|
101
|
+
返回 `Table` 实例（**数据源字段名为 `data`，非 `dataSource`**）：
|
|
112
102
|
|
|
113
|
-
|
|
103
|
+
| 成员 | 说明 |
|
|
104
|
+
| :-------------------------------------------------------------------- | :----------------------------------------------------- |
|
|
105
|
+
| `table.columns` / `table.data` | 列配置 / 数据源（Ref，element-plus 语义） |
|
|
106
|
+
| `table.pageParam` | 分页参数（reactive）：`current` / `pageSize` / `total` |
|
|
107
|
+
| `table.searchForm` | 搜索表单实例（Form 类型，所有 useForm 方法可用） |
|
|
108
|
+
| `table.setColumn` / `deleteColumn` / `appendColumn` / `prependColumn` | 列增删改查（用法同 setField，支持 `{all:true}`） |
|
|
109
|
+
| `table.setPageParam(patch)` | 设置分页参数 |
|
|
110
|
+
| `table.resetQueryParams()` | 重置分页到第一页 + 恢复搜索条件到初始值 |
|
|
114
111
|
|
|
115
|
-
|
|
116
|
-
// computed() — 声明式，初始化联动首选
|
|
117
|
-
disabled: computed(() => !form.formData.hasLimit),
|
|
112
|
+
## 关键约定
|
|
118
113
|
|
|
119
|
-
|
|
120
|
-
const isDisabled = ref(false);
|
|
114
|
+
### 自定义组件
|
|
121
115
|
|
|
122
|
-
|
|
123
|
-
form.setField('limitCount', { disabled: true });
|
|
124
|
-
```
|
|
116
|
+
`Field.component` 解析优先级（高 -> 低）：`teleport 插槽注入` > `ProComponentProvider.componentMap` > `内置 componentMap` > `原始 component 值`。
|
|
125
117
|
|
|
126
|
-
|
|
118
|
+
四种接入方式（完整代码见 skills）：
|
|
127
119
|
|
|
128
|
-
|
|
120
|
+
- **方式 1** `markRaw(SFC)`：单字段复用 SFC（**必须 markRaw**，否则被 Vue 深度代理触发性能警告）
|
|
121
|
+
- **方式 2** render 函数 `(props, ctx) => VNode`：需动态拼装 props
|
|
122
|
+
- **方式 3** `ProComponentProvider` 注入 `componentMap`：全局复用 / 覆盖内置组件，可追加 `declare module` 声明获强类型
|
|
123
|
+
- **方式 4** 模板 scoped slot：插槽名 = 字段 `path`，`v-bind="scoped"` 转发（teleport 机制，优先级最高）
|
|
129
124
|
|
|
130
|
-
|
|
131
|
-
// h() 挂载自定义组件
|
|
132
|
-
{ path: 'key', component: (p, ctx) => h(CustomInput, { ...p, ...ctx.attrs }) }
|
|
133
|
-
```
|
|
125
|
+
约定：默认 v-model 绑 `modelValue`，他 prop 用 `modelProp` 指定；组件会收到 `path` prop；除框架级属性外其余作 attrs 透传。
|
|
134
126
|
|
|
135
|
-
|
|
136
|
-
<!-- 同名插槽接管渲染，scoped 内置所有绑定参数 -->
|
|
137
|
-
<ProForm :form="form">
|
|
138
|
-
<template #agreement="scoped">
|
|
139
|
-
<el-checkbox v-bind="scoped">阅读并同意协议</el-checkbox>
|
|
140
|
-
</template>
|
|
141
|
-
</ProForm>
|
|
142
|
-
```
|
|
127
|
+
### valueFormatter -- 字段值转换
|
|
143
128
|
|
|
144
|
-
|
|
129
|
+
控制表单值与组件值之间的转换。**在表单数据写入前（computed setter 中，于 `onUpdate:modelValue` 写回前）执行**，支持两种形态：
|
|
145
130
|
|
|
146
|
-
|
|
131
|
+
```ts
|
|
132
|
+
// 函数形态：(新值, 旧值) => 转换后的值，写回 formData。仅 set（写入）方向生效，读取时不转换
|
|
133
|
+
{ path: 'name', valueFormatter: (val, oldVal) => val?.trim() }
|
|
147
134
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<el-form-item label="姓名"
|
|
152
|
-
><el-input v-model="form.formData.name"
|
|
153
|
-
/></el-form-item>
|
|
154
|
-
</ProForm>
|
|
135
|
+
// 对象形态：get 读出时转换，set 写入时转换（双向）
|
|
136
|
+
{ path: 'birthday', component: 'date-picker',
|
|
137
|
+
valueFormatter: { get: v => v ? new Date(v) : null, set: v => v ? dayjs(v).format('YYYY-MM-DD') : null } }
|
|
155
138
|
```
|
|
156
139
|
|
|
157
|
-
|
|
158
|
-
// ❌ 不查文档盲目猜测 — element-plus 用 filterable，不是 searchable
|
|
159
|
-
{ path: 'city', component: 'select', searchable: true }
|
|
160
|
-
// ✅ 查 element-plus 文档确认后
|
|
161
|
-
{ path: 'city', component: 'select', filterable: true }
|
|
140
|
+
### ProTable -- 配置驱动表格
|
|
162
141
|
|
|
163
|
-
|
|
164
|
-
{ path: 'name', component: 'input', span: 12, placeholder: '请输入' }
|
|
165
|
-
```
|
|
142
|
+
透传所有 element-plus `TableProps`（`& Omit<TableProps,'data'>`），可直接写 `row-key` / `bordered` / `stripe` 等原生属性；`size`、`loading` 是 v-model。
|
|
166
143
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
## 5. ProComponentProvider：全局默认配置
|
|
170
|
-
|
|
171
|
-
统一配置子组件默认属性，避免逐字段重复。
|
|
172
|
-
|
|
173
|
-
### INJECT_CONFIG 预设默认值
|
|
174
|
-
|
|
175
|
-
| 组件 | 预设默认值 |
|
|
176
|
-
| :---------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
177
|
-
| `switch` | `{ modelProp: 'modelValue' }` |
|
|
178
|
-
| `input` | `{ maxlength: 100, clearable: true, placeholder: '请输入' }` |
|
|
179
|
-
| `input.textarea` | `{ maxlength: 200, autosize: {minRows:3,maxRows:6}, showWordLimit: true, clearable: true, placeholder: '请输入' }` |
|
|
180
|
-
| `input.password` | `{ maxlength: 100, clearable: true, showPassword: true, placeholder: '请输入' }` |
|
|
181
|
-
| `select` / `cascader` | `{ clearable: true, placeholder: '请选择' }` |
|
|
182
|
-
| `input-number` | `{ max: 10^15-1, min: -(10^15+1), controls: false, placeholder: '请输入', style: {width:'100%'} }` |
|
|
183
|
-
| `date-picker` 系列 | `{ style: {width:'100%'} }` + 各子类型专用占位符 |
|
|
184
|
-
| `time-picker` / `time-select` | `{ style: {width:'100%'}, placeholder: '请选择' }` |
|
|
185
|
-
| `tree-select` | `{ clearable: true, placeholder: '请选择' }` |
|
|
186
|
-
| `pro-table` | `{ pagination: {layout:'total,sizes,prev,pager,next,jumper',pageSizes:[10,20,30,40,50,100],background:true}, searchFormConfig: {layout:'grid',expand:{minExpandRows:2,expandStatus:false}}, control: true, addIndexColumn: true }` |
|
|
187
|
-
| `pro-form` | `{ grid: { gutter: 24 } }` |
|
|
188
|
-
| `pro-form-item` | `{ span: 8 }` |
|
|
189
|
-
|
|
190
|
-
### 优先级（高→低）
|
|
191
|
-
|
|
192
|
-
1. Field 级别配置
|
|
193
|
-
2. `ProComponentProvider` 的 `componentVars` 参数
|
|
194
|
-
3. `INJECT_CONFIG` 内置预设
|
|
195
|
-
|
|
196
|
-
### 覆盖示例
|
|
197
|
-
|
|
198
|
-
```vue
|
|
199
|
-
<template>
|
|
200
|
-
<ProComponentProvider :component-vars="config">
|
|
201
|
-
<ProForm :form="form" />
|
|
202
|
-
</ProComponentProvider>
|
|
203
|
-
</template>
|
|
204
|
-
<script setup lang="ts">
|
|
205
|
-
const config = {
|
|
206
|
-
'pro-form-item': { span: 6 },
|
|
207
|
-
input: { maxlength: 200 },
|
|
208
|
-
select: { filterable: true },
|
|
209
|
-
};
|
|
210
|
-
</script>
|
|
211
|
-
```
|
|
144
|
+
关键 prop：`table`（useTable 实例）、`search`（数据查询方法 `() => Promise`，ProTable 内部调用，非自动触发）、`addIndexColumn`、`immediateSearch`、`control`、`searchFormConfig`（含 `hidden`/`container`/`layout`/`expand`）、`tableContainer`、`columns`（覆盖实例列配置）、`data`（覆盖实例数据源）、`pagination`（`false` | 分页属性）。
|
|
212
145
|
|
|
213
|
-
|
|
146
|
+
**数据流**：搜索->重置分页到第 1 页->调 `search()`；分页/排序变化->更新 `pageParam`->调 `search()`；重置->`resetQueryParams()`->调 `search()`。
|
|
214
147
|
|
|
215
|
-
|
|
148
|
+
### Column -- 列配置
|
|
216
149
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
],
|
|
223
|
-
// searchFields 与 ProForm fields 格式一致，支持相同分层剥离
|
|
224
|
-
searchFields: [
|
|
225
|
-
{ path: 'name', component: 'input', placeholder: '搜索' },
|
|
226
|
-
{ path: 'status', component: 'select', options: [...] },
|
|
227
|
-
],
|
|
228
|
-
data: [],
|
|
229
|
-
});
|
|
230
|
-
// 模板：<ProTable :table="table" :search="() => fetchData()" immediateSearch />
|
|
231
|
-
```
|
|
150
|
+
继承 element-plus `TableColumnCtx`（除 `prop`/`property`/`children`/`render`），所有原生列属性可用。新增：`prop`（列数据路径，主用，对应数据源 key）、`key`（辅助标识，优先级更低）、`hidden`（隐藏该列，配合列控制）、`render(scope)`（自定义渲染函数，接收 `{ row, column, $index, cellValue }`，优先级高于 `formatter`）。
|
|
151
|
+
|
|
152
|
+
> element-plus Table 列用 `prop`（不是 `dataIndex`），数据源用 `data`（不是 `dataSource`），v-model 用 `modelValue`（不是 `value`）。
|
|
153
|
+
|
|
154
|
+
## 反模式
|
|
232
155
|
|
|
233
|
-
|
|
156
|
+
- ❌ 在 `<ProForm>` 内手写 `<el-form-item>` -- ProForm 从 Field 配置自动渲染。
|
|
157
|
+
- ❌ 猜透传属性名 -- 先查 element-plus.org（element-plus 用 `clearable` 不是 `allowClear`，`filterable` 不是 `searchable`）。
|
|
158
|
+
- ❌ 把 `span` 当输入控件属性。
|
|
159
|
+
- ❌ 传 SFC 给 `component` 不用 `markRaw`。
|
|
160
|
+
- ❌ 在 ProTable 上忘了传 `:search`，或期望它自动请求 -- 查询由你提供并驱动。
|
|
161
|
+
- ❌ 把 element-plus 当 ant-design-vue -- 列用 `prop` 不是 `dataIndex`，数据源用 `data` 不是 `dataSource`，v-model 用 `modelValue` 不是 `value`。
|
|
234
162
|
|
|
235
|
-
|
|
163
|
+
## 按需深查
|
|
236
164
|
|
|
237
|
-
|
|
165
|
+
完整 API（详细签名、参数表、完整示例、ProTable Slots、ProComponentProvider 用法）：
|
|
238
166
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
167
|
+
- `.agents/skills/element-plus-pro/SKILL.md` — skills 入口（速查 + 参考导航）
|
|
168
|
+
- `.agents/skills/element-plus-pro/references/README.md` — 完整使用文档与进阶示例
|
|
169
|
+
- `.agents/skills/element-plus-pro/references/api.md` — 结构化 API 元数据
|
|
170
|
+
- `node_modules/@qin-ui/element-plus-pro/README.md` — 完整用法与进阶示例
|
|
171
|
+
- element-plus 组件属性查阅官方文档：https://element-plus.org
|