element-assits 0.0.91 → 0.0.92
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 +406 -406
- package/lib/index.js +8159 -8158
- package/lib/style.scss +920 -920
- package/package.json +36 -36
package/README.md
CHANGED
|
@@ -1,406 +1,406 @@
|
|
|
1
|
-
# [element-assits](https://github.com/kunben/element-assits)
|
|
2
|
-
|
|
3
|
-
## 介绍
|
|
4
|
-
element-ui 为了适用范围更广，组件灵活性很高。在实际的业务开发过程中，需要对其进行适当的封装以适应项目并提高开发效率。
|
|
5
|
-
|
|
6
|
-
此项目扩展了 element-ui 的表格和表单组件，使其在多表格和表单的项目中更易于使用。
|
|
7
|
-
|
|
8
|
-
## 快速开始
|
|
9
|
-
安装：
|
|
10
|
-
`npm i element-assits -S` (确保已经安装了`vue` 和 `element-ui`)
|
|
11
|
-
|
|
12
|
-
引入：
|
|
13
|
-
```
|
|
14
|
-
// 入口文件 main.js
|
|
15
|
-
import Vue from 'vue'
|
|
16
|
-
import Element from 'element-ui'
|
|
17
|
-
import 'element-ui/lib/theme-chalk/index.css'
|
|
18
|
-
import ElementAssits from 'element-assits'
|
|
19
|
-
import 'element-assits/lib/style.scss'
|
|
20
|
-
|
|
21
|
-
Vue.use(Element)
|
|
22
|
-
Vue.use(ElementAssits, {
|
|
23
|
-
components: true, // 是否全局注册所有组件，默认true
|
|
24
|
-
isNilCellText: undefined // 当表格和描述列表单元格为undefined或null时的替代字符
|
|
25
|
-
})
|
|
26
|
-
// ...
|
|
27
|
-
```
|
|
28
|
-
使用：
|
|
29
|
-
默认全局注册了 `EaForm` `EaTable` `EaSelect` `EaModal` `EaPopover` 等组件
|
|
30
|
-
提供了 `uuid` `recursive` `recursiveFilter` `asyncLoad` `renderCell` 五个工具函数
|
|
31
|
-
Vue 原型上挂载了 `$asyncLoad` 方法（与asyncLoad相同）
|
|
32
|
-
> 如果单独引入 asyncLoad 方法，并且没有挂载在Vue原型上
|
|
33
|
-
> 那么，asyncLoad 方法载入的组件将游离在vueApp实例树之外
|
|
34
|
-
> 副作用是无法访问$parent,$router,$store等等
|
|
35
|
-
> 除非你 asyncLoad.bind(this) 手动为其绑定上下文
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
## 用法
|
|
39
|
-
|
|
40
|
-
### 表格组件 EaTable
|
|
41
|
-
此组件扩展了 el-table 组件。不同的是：
|
|
42
|
-
- 它完全使用对象数组来控制表格列
|
|
43
|
-
- 封装了搜索栏，动态宽度，动态折叠等
|
|
44
|
-
- 封装了分页组件，自动分页
|
|
45
|
-
- 各个位置留有菜单栏插槽，合理布局
|
|
46
|
-
#### props
|
|
47
|
-
| 属性名 | 含义 | 类型 | 默认值 |
|
|
48
|
-
|:---|:---|:---|:---|
|
|
49
|
-
| column | 列信息数组| Array | [] |
|
|
50
|
-
| data | 表格数据 | Array | [] |
|
|
51
|
-
| pageRequest | 分页请求 | Function <br>() => Promise<{data:any[], total:number}> | undefined |
|
|
52
|
-
| loading | 表格加载状态 | Boolean | undefined |
|
|
53
|
-
| initRequest | 是否初始化发送请求 | Boolean \| Function <br> boolean \| (search: () => void) => void | true |
|
|
54
|
-
| isNilCellText | 当单元格内容为空时的替代字符 | String \| Boolean | undefined |
|
|
55
|
-
| innerForm | 内部 - 表单（搜索栏） | Boolean \| Object | undefined |
|
|
56
|
-
| .model | 搜索表单的值 | Object | undefined |
|
|
57
|
-
| .limit|限制默认显示的搜索条件数量|Number \| auto \| all|auto|
|
|
58
|
-
| .referenceItemWidth|单项参考宽度|Number|180|
|
|
59
|
-
| .maxItemWidth|单项最大宽度|Number|240|
|
|
60
|
-
| .loading|控制更多按钮加载状态|Boolean|false|
|
|
61
|
-
| .defaultShowAll|搜索条件是否默认展开|Boolean|false|
|
|
62
|
-
| .column[].exclusiveDoubleCells|允许某一项独占两格|Boolean|false|
|
|
63
|
-
| innerSelection | 内部 - 选中列 | Boolean \| Object | undefined|
|
|
64
|
-
| .data | 选中的行 | Array | undefined |
|
|
65
|
-
| innerIndex | 内部 - 索引 | Boolean \| Object | true|
|
|
66
|
-
| innerPagination | 内部 - 分页 | Boolean \| Object | undefined|
|
|
67
|
-
| innerOperation | 内部 - 操作栏（尾列）| Boolean \| Object | undefined|
|
|
68
|
-
| .maxNumOfBtn|最大显示的按钮数，溢出折叠|Number|3|
|
|
69
|
-
| .enableAutoWidth|是否自动计算宽度（当按钮动态时）|Boolean|true|
|
|
70
|
-
|
|
71
|
-
#### methods
|
|
72
|
-
| 方法名 | 说明 | 参数 |
|
|
73
|
-
|:---|:---|:---|
|
|
74
|
-
| handleSearch | 执行搜索 | 无 |
|
|
75
|
-
| handleRefresh | 执行刷新 | 无 |
|
|
76
|
-
#### slots
|
|
77
|
-
| 插槽名 | 默认值 | 说明 |
|
|
78
|
-
|:---|:---|:---|
|
|
79
|
-
| search | 搜索栏 | 如果想自定义搜索栏时
|
|
80
|
-
| table | 表格 | 如果不想用表格来渲染数据，此处可自定义渲染数据的方式
|
|
81
|
-
| top-menu | 无 | 顶部菜单
|
|
82
|
-
| row-menu | 无 | 行菜单，需要 initOperation 至少为true
|
|
83
|
-
| bottom-menu | 无 | 底部菜单
|
|
84
|
-
| before-column | 无 | 表格内部所有列之前
|
|
85
|
-
| after-index-column | 无 | 表格内部索引列之后
|
|
86
|
-
| after-selection-column | 无 | 表格多选列之后
|
|
87
|
-
| before-action-column | 无 | 表格内部操作列之前
|
|
88
|
-
| after-column | 无 | 表格内部所有列之后
|
|
89
|
-
| footer | bottom-menu&分页 | 表格底部
|
|
90
|
-
#### events
|
|
91
|
-
| 事件名 | 说明 | 参数 |
|
|
92
|
-
|:---|:---|:---|
|
|
93
|
-
|search-reset| 搜索重置事件|params.callback 重置表单并搜索（不监听时默认行为） <br> params.reset 仅重置表单<br> params.search 仅搜索 |
|
|
94
|
-
#### column-attributes
|
|
95
|
-
| 属性名 | 类型 | 默认值 | 说明 |
|
|
96
|
-
|:---|:---|:---|:---|
|
|
97
|
-
| label | String | undefined | 列名
|
|
98
|
-
| prop | String | undefined | 列属性名
|
|
99
|
-
| show | Boolean | undefined | 是否显示，非 false 即显示
|
|
100
|
-
| bind | Object | undefined | v-bind 至对应的 el-table-column 组件
|
|
101
|
-
| isNilCellText | String \| Boolean | undefined | 当单元格内容为空时的替代字符
|
|
102
|
-
|
|
103
|
-
### 表单组件 EaForm
|
|
104
|
-
#### props
|
|
105
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
106
|
-
|:---|:---|:---|:---|
|
|
107
|
-
|model|表单数据对象|Object|
|
|
108
|
-
|rules|表单验证规则对象|Object|
|
|
109
|
-
|dense|是否紧凑模式|Boolean|false|
|
|
110
|
-
|column|表单项信息组|Array|必填|
|
|
111
|
-
|column[].label|标签名|String \| Function|必填|
|
|
112
|
-
|column[].prop|属性名|String|必填|
|
|
113
|
-
|column[].labelTooltip|名称描述tips|String \| Object|
|
|
114
|
-
|column[].labelWidth|独立设置标签宽度|String|
|
|
115
|
-
|column[].required|是否必填|Boolean|false|
|
|
116
|
-
|column[].component|所用组件|String \| Component|el-input|
|
|
117
|
-
|column[].rules|校验规则|Array \| Function|
|
|
118
|
-
|column[].bind|组件v-bind|Object|
|
|
119
|
-
|column[].on|组件v-on|Object|
|
|
120
|
-
|column[].show|控制表单项是否显示|Boolean \| Function|true|
|
|
121
|
-
|column[].enable|控制表单项是否启用|Boolean \| Function|true|
|
|
122
|
-
|column[].span|所占栅格|Number|12|
|
|
123
|
-
|column[].pull|栅格偏移|Number|
|
|
124
|
-
|column[].push|栅格偏移|Number|
|
|
125
|
-
|column[].offset|栅格偏移|Number|
|
|
126
|
-
#### methods
|
|
127
|
-
| 方法 | 说明 | 参数 |
|
|
128
|
-
|:---|:---|:---|
|
|
129
|
-
|setData|设置表单数据对象的值|要设置的数据对象|
|
|
130
|
-
#### events
|
|
131
|
-
| 事件名 | 说明 | 参数 |
|
|
132
|
-
|:---|:---|:---|
|
|
133
|
-
|change| 表单值变化事件 | 当前表单的值 |
|
|
134
|
-
|
|
135
|
-
### 按钮 EaButton
|
|
136
|
-
继承el-button, 简化按钮配置
|
|
137
|
-
#### props
|
|
138
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
139
|
-
|:---|:---|:---|:---|
|
|
140
|
-
|customType|自定义类型，将启用小方格按钮|String|undefined|
|
|
141
|
-
|tooltip|按钮提示文本，为空则禁用|String|undefined|
|
|
142
|
-
|feat|按钮配置简写<br>例如：feat="primary\|el-icon-plus\|新增"|String|undefined|
|
|
143
|
-
|
|
144
|
-
### 弹窗 EaModal
|
|
145
|
-
继承 el-dialog，允许拖拽，允许少量修改布局，简化按钮
|
|
146
|
-
绑定confirm事件，出现确定按钮；绑定cancel事件，出现取消按钮
|
|
147
|
-
#### props
|
|
148
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
149
|
-
|:---|:---|:---|:---|
|
|
150
|
-
|customClass|自定义css类|String|undefined|
|
|
151
|
-
|confirmLoading|确定按钮的加载状态|Boolean|false|
|
|
152
|
-
|margin|弹窗 margin|String|undefined|
|
|
153
|
-
|bodyPadding|内容 padding|String|undefined|
|
|
154
|
-
|bodyMinHeight|内容最小高度|String|undefined|
|
|
155
|
-
|allowDrag|是否允许拖拽|Boolean|true|
|
|
156
|
-
|confirmText|确定按钮文本|String|'确定'|
|
|
157
|
-
|cancelText|取消按钮文本|String|'取消'|
|
|
158
|
-
|
|
159
|
-
### 抽屉 EaDrawer
|
|
160
|
-
继承 el-drawer，允许少量修改布局，简化按钮
|
|
161
|
-
绑定confirm事件，出现确定按钮；绑定cancel事件，出现取消按钮
|
|
162
|
-
#### props
|
|
163
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
164
|
-
|:---|:---|:---|:---|
|
|
165
|
-
|customClass|自定义css类|String|undefined|
|
|
166
|
-
|confirmLoading|确定按钮的加载状态|Boolean|false|
|
|
167
|
-
|width|抽屉宽度|String|'720px'|
|
|
168
|
-
|bodyPadding|内容 padding|String|'20px'|
|
|
169
|
-
|headerHeight|标题高度|String|'70px'|
|
|
170
|
-
|footerHeight|底部高度|String|'70px'|
|
|
171
|
-
|confirmText|确定按钮文本|String|'确定'|
|
|
172
|
-
|cancelText|取消按钮文本|String|'取消'|
|
|
173
|
-
|
|
174
|
-
### 数字输入框 EaNumber
|
|
175
|
-
使样式与 el-input 相似
|
|
176
|
-
|
|
177
|
-
### 气泡框 EaPopover
|
|
178
|
-
函数式Popover，允许异步调用
|
|
179
|
-
#### props
|
|
180
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
181
|
-
|:---|:---|:---|:---|
|
|
182
|
-
|reference|参考dom节点|HTMLElement|undefined|
|
|
183
|
-
|offset|偏移|Number|0|
|
|
184
|
-
|mountedCallback|加载后回调，方便使用|Function|undefined|
|
|
185
|
-
#### slots
|
|
186
|
-
| 插槽名 | 默认值 | 说明 |
|
|
187
|
-
|:---|:---|:---|
|
|
188
|
-
| default | 无 | 内容插槽 <br> (refresh, close) 允许刷新和关闭气泡框 |
|
|
189
|
-
|
|
190
|
-
### 单选框 EaRadio
|
|
191
|
-
允许绑定数据和异步数据，允许默认选中
|
|
192
|
-
#### props
|
|
193
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
194
|
-
|:---|:---|:---|:---|
|
|
195
|
-
|data|数据|Array|undefined|
|
|
196
|
-
|asyncData|异步数据|Function|undefined|
|
|
197
|
-
|props|配置选项|Object|undefined|
|
|
198
|
-
|defaultFirst|是否默认选中第一项|Boolean|false|
|
|
199
|
-
|innerRadio|绑定至内部-radio|Object|undefined|
|
|
200
|
-
|type|radio类型|String|undefined|
|
|
201
|
-
|
|
202
|
-
### 开关 EaSwitch
|
|
203
|
-
额外支 size="mini" 尺寸
|
|
204
|
-
|
|
205
|
-
### 滚动容器 EaScrollbar
|
|
206
|
-
el-scrollbar 衍生，优化样式
|
|
207
|
-
#### props
|
|
208
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
209
|
-
|:---|:---|:---|:---|
|
|
210
|
-
|wrapStyle|wrap样式|String|undefined|
|
|
211
|
-
|
|
212
|
-
### 虚拟滚动 EaVirtualScroll
|
|
213
|
-
#### props
|
|
214
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
215
|
-
|:---|:---|:---|:---|
|
|
216
|
-
|enableVirtualScroll|是否开启虚拟滚动|Boolean \| String|auto|
|
|
217
|
-
|options|选项列表|Array| [] |
|
|
218
|
-
|itemSize|单项高度|Number|30|
|
|
219
|
-
|redundancy|渲染总数，影响流畅度和性能|Number|60|
|
|
220
|
-
|
|
221
|
-
### JsonSchema编辑器 EaJsonSchema
|
|
222
|
-
#### props
|
|
223
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
224
|
-
|:---|:---|:---|:---|
|
|
225
|
-
|value / v-model|json-schema 数据|Object|{}|
|
|
226
|
-
|height|组件高度|Number \| String| auto |
|
|
227
|
-
|maxHeight|当自动高度时，限制最大高度|Number| 500 |
|
|
228
|
-
|itemSize|单项高度|Number|32|
|
|
229
|
-
|allowEdit|是否允许编辑|Boolean|true|
|
|
230
|
-
|checkbox|是否开启多选列|Boolean|false|
|
|
231
|
-
|disableCheckbox|是否禁用选择（只读）|Boolean|false|
|
|
232
|
-
|columnFormat|对原有的column进行过滤|Function|column => column|
|
|
233
|
-
|rootAlias|根节点别名|String|root|
|
|
234
|
-
|advancedConfChunk|高级配置构造函数回调，可自由设置高级配置表单|Function|undefined|
|
|
235
|
-
#### methods
|
|
236
|
-
| 方法名 | 说明 | 参数 |
|
|
237
|
-
|:---|:---|:---|
|
|
238
|
-
| validate | 数据验证，仅验证prop不能为空 | 无 |
|
|
239
|
-
| getData | 获取数据（配置结果） | 无 |
|
|
240
|
-
| getChecked | 获取选中项 | 无 |
|
|
241
|
-
| setChecked | 设置选中项 | 选中项schema路径列表 |
|
|
242
|
-
| getSchemaPath | 获取schema路径 | __state.prefix |
|
|
243
|
-
| getDataPath | 获取data路径 | __state.prefix, callback |
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
### 下拉框 EaSelect
|
|
247
|
-
允许异步数据，允许大数据量虚拟滚动
|
|
248
|
-
#### props
|
|
249
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
250
|
-
|:---|:---|:---|:---|
|
|
251
|
-
|value / v-model|绑定值|String \| Number \| Array|undefined|
|
|
252
|
-
|label|额外名称绑定，允许.sync|String|undefined|
|
|
253
|
-
|data|选项数据|Array|[]|
|
|
254
|
-
|asyncParams|异步参数|undefined|undefined|
|
|
255
|
-
|asyncData|异步数据，允许异步参数|Function|undefined|
|
|
256
|
-
|props|配置选项|Object|undefined|
|
|
257
|
-
|props.desc|描述列字段名，将影响过滤方法|String|undefined|
|
|
258
|
-
|itemMaxWidth|单项[label,value]最大宽度|Number \| Array|150|
|
|
259
|
-
|popperClass|弹出框自定义css类|String|undefined|
|
|
260
|
-
|showCheckAll|多选时是否显示全选按钮|Boolean|false|
|
|
261
|
-
#### slots
|
|
262
|
-
| 插槽名 | 默认值 | 说明 |
|
|
263
|
-
|:---|:---|:---|
|
|
264
|
-
| prefix | 无 | 输入框前缀 |
|
|
265
|
-
| empty | 无 | 空数据 |
|
|
266
|
-
| before-option | 无 | 选项之前 |
|
|
267
|
-
| after-option | 无 | 选项之后 |
|
|
268
|
-
|
|
269
|
-
### 分割面板 EaSplit
|
|
270
|
-
分割面板，允许拖拽
|
|
271
|
-
#### props
|
|
272
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
273
|
-
|:---|:---|:---|:---|
|
|
274
|
-
|default|默认分割比例|Number|0.2
|
|
275
|
-
|min|最小分割比例|Number|0.2
|
|
276
|
-
|max|最大分割比例|Number|0.5
|
|
277
|
-
#### slots
|
|
278
|
-
| 插槽名 | 默认值 | 说明 |
|
|
279
|
-
|:---|:---|:---|
|
|
280
|
-
| left | 无 |左侧面板|
|
|
281
|
-
| center | 默认手柄 |中间分割手柄 |
|
|
282
|
-
| right | 无 |右侧面板 |
|
|
283
|
-
|
|
284
|
-
### 树 EaTree
|
|
285
|
-
与el-tree相比，带搜索框和搜索方法，带scrollbar，允许设置剩余高度，异步数据
|
|
286
|
-
#### props
|
|
287
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
288
|
-
|:---|:---|:---|:---|
|
|
289
|
-
|inputPlaceholder|搜索框的占位内容|String|请输入关键字搜索|
|
|
290
|
-
|remainingHeight|剩余高度|Number|200|
|
|
291
|
-
|props|配置选项|Object|undefined|
|
|
292
|
-
|data|数据|Array|undefined|
|
|
293
|
-
|asyncData|异步数据|Function|undefined|
|
|
294
|
-
|filterNodeMethod|过滤方法|Function|undefined|
|
|
295
|
-
|emptyText|空数据时文字描述|String|暂无数据|
|
|
296
|
-
|title|标题|String|undefined|
|
|
297
|
-
|border|是否显示边框|Boolean|false|
|
|
298
|
-
#### slots
|
|
299
|
-
| 插槽名 | 默认值 | 说明 |
|
|
300
|
-
|:---|:---|:---|
|
|
301
|
-
| default | 无 |自定义树节点的内容，参数为 { node, data }|
|
|
302
|
-
| input-prefix | 无 |搜索框前缀|
|
|
303
|
-
| input-append | 无 |搜索框后缀|
|
|
304
|
-
| header | 无 |自定义标题|
|
|
305
|
-
| header-append | 无 |自定义标题后缀|
|
|
306
|
-
|
|
307
|
-
### 虚拟树 EaDataTree
|
|
308
|
-
#### props
|
|
309
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
310
|
-
|:---|:---|:---|:---|
|
|
311
|
-
|data|(树)数据|Array|[]|
|
|
312
|
-
|props|配置项|Object|见下文|
|
|
313
|
-
| props.label|显示名称|String|label|
|
|
314
|
-
| props.value|实际值|String|value|
|
|
315
|
-
| props.children|子集|String|children|
|
|
316
|
-
| props.hasChildren|手动指定是否含有子集<br>配合 loadMethod 使用|String|undefined|
|
|
317
|
-
|height|组件高度|Number \| String| auto |
|
|
318
|
-
|maxHeight|当自动高度时，限制最大高度|Number| 500 |
|
|
319
|
-
|itemSize|单项高度|Number|32|
|
|
320
|
-
|redundancy|渲染总数，影响流畅度和性能|Number|60|
|
|
321
|
-
|checkbox|是否显示多选框|Boolean|false|
|
|
322
|
-
|disableCheckbox|是否禁止多选框|Boolean|false|
|
|
323
|
-
|noDataText|无数据时的文本|String|暂无数据|
|
|
324
|
-
|loadMethod|展开节点时异步加载的方法|Function<br> () => Promise\<any[]\>|undefined|
|
|
325
|
-
|rowKey|行唯一key|String|props.value|
|
|
326
|
-
|border|是否显示边框|Boolean|false|
|
|
327
|
-
|stripe|是否需要斑马纹|Boolean|false|
|
|
328
|
-
#### methods
|
|
329
|
-
| 方法名 | 说明 | 参数 |
|
|
330
|
-
|:---|:---|:---|
|
|
331
|
-
| getChecked | 获取选中项 | 无 |
|
|
332
|
-
| setChecked | 设置选中项 | (树)数据（以`props.value`匹配） |
|
|
333
|
-
| setCheckedKeys | 设置选中项 | rowKey: string[]（以`rowKey`匹配）, state: boolean |
|
|
334
|
-
| filter | 过滤树 | keyword:string 或 callback: () => boolean |
|
|
335
|
-
#### events
|
|
336
|
-
| 事件名 | 说明 | 参数 |
|
|
337
|
-
|:---|:---|:---|
|
|
338
|
-
|selection-change|选中项变化|:---|
|
|
339
|
-
|expand| 操作展开收起时 | 操作的节点(node) |
|
|
340
|
-
|expanded| 操作展开收起后 | 操作的节点(state, node, isAsync, data) |
|
|
341
|
-
#### slots
|
|
342
|
-
| 插槽名 | 默认值 | 说明 |
|
|
343
|
-
|:---|:---|:---|
|
|
344
|
-
| default | 单项（行） | 自定义行内容，跟随枝干 |
|
|
345
|
-
| row | 单项（行） | 自定义行内容，脱离枝干 |
|
|
346
|
-
|
|
347
|
-
### 列表 EaList
|
|
348
|
-
#### props
|
|
349
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
350
|
-
|:---|:---|:---|:---|
|
|
351
|
-
|data|数据|Array|undefined|
|
|
352
|
-
|pageRequest|分页请求|Function|undefined|
|
|
353
|
-
|initRequest|是否初始化请求|Boolean|true|
|
|
354
|
-
|itemSize|单项高度|Number|30|
|
|
355
|
-
|remainingHeight|剩余高度|Number|200|
|
|
356
|
-
|page|分页信息|Object|undefined|
|
|
357
|
-
|redundancy|渲染总数，影响流畅度和性能|Number|60|
|
|
358
|
-
#### slots
|
|
359
|
-
| 插槽名 | 默认值 | 说明 |
|
|
360
|
-
|:---|:---|:---|
|
|
361
|
-
| default | 单项（行） | 自定义行内容 |
|
|
362
|
-
|
|
363
|
-
### 虚拟数据表格 EaDataTable
|
|
364
|
-
#### props
|
|
365
|
-
| 属性名 | 说明 | 类型 | 默认值 |
|
|
366
|
-
|:---|:---|:---|:---|
|
|
367
|
-
|data|数据|Array|undefined|
|
|
368
|
-
|column|列信息|Array|undefined|
|
|
369
|
-
|pageRequest|分页请求|Function|undefined|
|
|
370
|
-
|initRequest|是否初始化请求|Boolean|true|
|
|
371
|
-
|itemSize|单项高度|Number|30|
|
|
372
|
-
|maxHeight|最大高度|Number|300|
|
|
373
|
-
|page|分页信息|Object|undefined|
|
|
374
|
-
|redundancy|渲染总数，影响流畅度和性能|Number|undefined|
|
|
375
|
-
|border|是否显示边框|Boolean|false|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
### 描述列表 EaDesc
|
|
379
|
-
#### props
|
|
380
|
-
| 属性名 | 含义 | 类型 | 默认值 |
|
|
381
|
-
|:---|:---|:---|:---|
|
|
382
|
-
|title|标题|String|undefined|
|
|
383
|
-
|data|数据|Object|必填|
|
|
384
|
-
|column|列信息|Array|必填|
|
|
385
|
-
|column[].bind.class|单独设置类|Object|undefined|
|
|
386
|
-
|column[].bind.style|单独设置样式|Object|undefined|
|
|
387
|
-
|labelWidth|标签宽度|Number \| String|100|
|
|
388
|
-
|split|分割数量|Number|2|
|
|
389
|
-
|diff|有差异的列信息|Array|undefined|
|
|
390
|
-
|gutter|间隔|Number|0|
|
|
391
|
-
|isNilCellText|当单元格内容为空时的替代字符|String\|Boolean|undefined|
|
|
392
|
-
|
|
393
|
-
### 弹窗文件上传 EaFileUpload
|
|
394
|
-
#### props
|
|
395
|
-
| 属性名 | 含义 | 类型 | 默认值 |
|
|
396
|
-
|:---|:---|:---|:---|
|
|
397
|
-
|title|标题|String|文件上传|
|
|
398
|
-
|multiple|是否多选|Boolean|false|
|
|
399
|
-
|limit|最大数量限制|Number|1|
|
|
400
|
-
|suffix|允许的文件后缀|String|xlsx,xls|
|
|
401
|
-
|maxSize|允许的文件大小，单位M|Number|100|
|
|
402
|
-
|httpRequest|文件上传|Function|必填|
|
|
403
|
-
|httpTemplate|模板下载|Function|undefined|
|
|
404
|
-
|httpFinally|请求完成|Function|undefined|
|
|
405
|
-
|innerUploadBind|绑定至el-upload|Object|undefined|
|
|
406
|
-
|innerUploadOn|绑定至el-upload|Object|undefined|
|
|
1
|
+
# [element-assits](https://github.com/kunben/element-assits)
|
|
2
|
+
|
|
3
|
+
## 介绍
|
|
4
|
+
element-ui 为了适用范围更广，组件灵活性很高。在实际的业务开发过程中，需要对其进行适当的封装以适应项目并提高开发效率。
|
|
5
|
+
|
|
6
|
+
此项目扩展了 element-ui 的表格和表单组件，使其在多表格和表单的项目中更易于使用。
|
|
7
|
+
|
|
8
|
+
## 快速开始
|
|
9
|
+
安装：
|
|
10
|
+
`npm i element-assits -S` (确保已经安装了`vue` 和 `element-ui`)
|
|
11
|
+
|
|
12
|
+
引入：
|
|
13
|
+
```
|
|
14
|
+
// 入口文件 main.js
|
|
15
|
+
import Vue from 'vue'
|
|
16
|
+
import Element from 'element-ui'
|
|
17
|
+
import 'element-ui/lib/theme-chalk/index.css'
|
|
18
|
+
import ElementAssits from 'element-assits'
|
|
19
|
+
import 'element-assits/lib/style.scss'
|
|
20
|
+
|
|
21
|
+
Vue.use(Element)
|
|
22
|
+
Vue.use(ElementAssits, {
|
|
23
|
+
components: true, // 是否全局注册所有组件，默认true
|
|
24
|
+
isNilCellText: undefined // 当表格和描述列表单元格为undefined或null时的替代字符
|
|
25
|
+
})
|
|
26
|
+
// ...
|
|
27
|
+
```
|
|
28
|
+
使用：
|
|
29
|
+
默认全局注册了 `EaForm` `EaTable` `EaSelect` `EaModal` `EaPopover` 等组件
|
|
30
|
+
提供了 `uuid` `recursive` `recursiveFilter` `asyncLoad` `renderCell` 五个工具函数
|
|
31
|
+
Vue 原型上挂载了 `$asyncLoad` 方法（与asyncLoad相同）
|
|
32
|
+
> 如果单独引入 asyncLoad 方法，并且没有挂载在Vue原型上
|
|
33
|
+
> 那么，asyncLoad 方法载入的组件将游离在vueApp实例树之外
|
|
34
|
+
> 副作用是无法访问$parent,$router,$store等等
|
|
35
|
+
> 除非你 asyncLoad.bind(this) 手动为其绑定上下文
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## 用法
|
|
39
|
+
|
|
40
|
+
### 表格组件 EaTable
|
|
41
|
+
此组件扩展了 el-table 组件。不同的是：
|
|
42
|
+
- 它完全使用对象数组来控制表格列
|
|
43
|
+
- 封装了搜索栏，动态宽度，动态折叠等
|
|
44
|
+
- 封装了分页组件，自动分页
|
|
45
|
+
- 各个位置留有菜单栏插槽，合理布局
|
|
46
|
+
#### props
|
|
47
|
+
| 属性名 | 含义 | 类型 | 默认值 |
|
|
48
|
+
|:---|:---|:---|:---|
|
|
49
|
+
| column | 列信息数组| Array | [] |
|
|
50
|
+
| data | 表格数据 | Array | [] |
|
|
51
|
+
| pageRequest | 分页请求 | Function <br>() => Promise<{data:any[], total:number}> | undefined |
|
|
52
|
+
| loading | 表格加载状态 | Boolean | undefined |
|
|
53
|
+
| initRequest | 是否初始化发送请求 | Boolean \| Function <br> boolean \| (search: () => void) => void | true |
|
|
54
|
+
| isNilCellText | 当单元格内容为空时的替代字符 | String \| Boolean | undefined |
|
|
55
|
+
| innerForm | 内部 - 表单（搜索栏） | Boolean \| Object | undefined |
|
|
56
|
+
| .model | 搜索表单的值 | Object | undefined |
|
|
57
|
+
| .limit|限制默认显示的搜索条件数量|Number \| auto \| all|auto|
|
|
58
|
+
| .referenceItemWidth|单项参考宽度|Number|180|
|
|
59
|
+
| .maxItemWidth|单项最大宽度|Number|240|
|
|
60
|
+
| .loading|控制更多按钮加载状态|Boolean|false|
|
|
61
|
+
| .defaultShowAll|搜索条件是否默认展开|Boolean|false|
|
|
62
|
+
| .column[].exclusiveDoubleCells|允许某一项独占两格|Boolean|false|
|
|
63
|
+
| innerSelection | 内部 - 选中列 | Boolean \| Object | undefined|
|
|
64
|
+
| .data | 选中的行 | Array | undefined |
|
|
65
|
+
| innerIndex | 内部 - 索引 | Boolean \| Object | true|
|
|
66
|
+
| innerPagination | 内部 - 分页 | Boolean \| Object | undefined|
|
|
67
|
+
| innerOperation | 内部 - 操作栏（尾列）| Boolean \| Object | undefined|
|
|
68
|
+
| .maxNumOfBtn|最大显示的按钮数，溢出折叠|Number|3|
|
|
69
|
+
| .enableAutoWidth|是否自动计算宽度（当按钮动态时）|Boolean|true|
|
|
70
|
+
|
|
71
|
+
#### methods
|
|
72
|
+
| 方法名 | 说明 | 参数 |
|
|
73
|
+
|:---|:---|:---|
|
|
74
|
+
| handleSearch | 执行搜索 | 无 |
|
|
75
|
+
| handleRefresh | 执行刷新 | 无 |
|
|
76
|
+
#### slots
|
|
77
|
+
| 插槽名 | 默认值 | 说明 |
|
|
78
|
+
|:---|:---|:---|
|
|
79
|
+
| search | 搜索栏 | 如果想自定义搜索栏时
|
|
80
|
+
| table | 表格 | 如果不想用表格来渲染数据，此处可自定义渲染数据的方式
|
|
81
|
+
| top-menu | 无 | 顶部菜单
|
|
82
|
+
| row-menu | 无 | 行菜单，需要 initOperation 至少为true
|
|
83
|
+
| bottom-menu | 无 | 底部菜单
|
|
84
|
+
| before-column | 无 | 表格内部所有列之前
|
|
85
|
+
| after-index-column | 无 | 表格内部索引列之后
|
|
86
|
+
| after-selection-column | 无 | 表格多选列之后
|
|
87
|
+
| before-action-column | 无 | 表格内部操作列之前
|
|
88
|
+
| after-column | 无 | 表格内部所有列之后
|
|
89
|
+
| footer | bottom-menu&分页 | 表格底部
|
|
90
|
+
#### events
|
|
91
|
+
| 事件名 | 说明 | 参数 |
|
|
92
|
+
|:---|:---|:---|
|
|
93
|
+
|search-reset| 搜索重置事件|params.callback 重置表单并搜索（不监听时默认行为） <br> params.reset 仅重置表单<br> params.search 仅搜索 |
|
|
94
|
+
#### column-attributes
|
|
95
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
96
|
+
|:---|:---|:---|:---|
|
|
97
|
+
| label | String | undefined | 列名
|
|
98
|
+
| prop | String | undefined | 列属性名
|
|
99
|
+
| show | Boolean | undefined | 是否显示，非 false 即显示
|
|
100
|
+
| bind | Object | undefined | v-bind 至对应的 el-table-column 组件
|
|
101
|
+
| isNilCellText | String \| Boolean | undefined | 当单元格内容为空时的替代字符
|
|
102
|
+
|
|
103
|
+
### 表单组件 EaForm
|
|
104
|
+
#### props
|
|
105
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
106
|
+
|:---|:---|:---|:---|
|
|
107
|
+
|model|表单数据对象|Object|
|
|
108
|
+
|rules|表单验证规则对象|Object|
|
|
109
|
+
|dense|是否紧凑模式|Boolean|false|
|
|
110
|
+
|column|表单项信息组|Array|必填|
|
|
111
|
+
|column[].label|标签名|String \| Function|必填|
|
|
112
|
+
|column[].prop|属性名|String|必填|
|
|
113
|
+
|column[].labelTooltip|名称描述tips|String \| Object|
|
|
114
|
+
|column[].labelWidth|独立设置标签宽度|String|
|
|
115
|
+
|column[].required|是否必填|Boolean|false|
|
|
116
|
+
|column[].component|所用组件|String \| Component|el-input|
|
|
117
|
+
|column[].rules|校验规则|Array \| Function|
|
|
118
|
+
|column[].bind|组件v-bind|Object|
|
|
119
|
+
|column[].on|组件v-on|Object|
|
|
120
|
+
|column[].show|控制表单项是否显示|Boolean \| Function|true|
|
|
121
|
+
|column[].enable|控制表单项是否启用|Boolean \| Function|true|
|
|
122
|
+
|column[].span|所占栅格|Number|12|
|
|
123
|
+
|column[].pull|栅格偏移|Number|
|
|
124
|
+
|column[].push|栅格偏移|Number|
|
|
125
|
+
|column[].offset|栅格偏移|Number|
|
|
126
|
+
#### methods
|
|
127
|
+
| 方法 | 说明 | 参数 |
|
|
128
|
+
|:---|:---|:---|
|
|
129
|
+
|setData|设置表单数据对象的值|要设置的数据对象|
|
|
130
|
+
#### events
|
|
131
|
+
| 事件名 | 说明 | 参数 |
|
|
132
|
+
|:---|:---|:---|
|
|
133
|
+
|change| 表单值变化事件 | 当前表单的值 |
|
|
134
|
+
|
|
135
|
+
### 按钮 EaButton
|
|
136
|
+
继承el-button, 简化按钮配置
|
|
137
|
+
#### props
|
|
138
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
139
|
+
|:---|:---|:---|:---|
|
|
140
|
+
|customType|自定义类型，将启用小方格按钮|String|undefined|
|
|
141
|
+
|tooltip|按钮提示文本，为空则禁用|String|undefined|
|
|
142
|
+
|feat|按钮配置简写<br>例如：feat="primary\|el-icon-plus\|新增"|String|undefined|
|
|
143
|
+
|
|
144
|
+
### 弹窗 EaModal
|
|
145
|
+
继承 el-dialog，允许拖拽，允许少量修改布局，简化按钮
|
|
146
|
+
绑定confirm事件，出现确定按钮；绑定cancel事件，出现取消按钮
|
|
147
|
+
#### props
|
|
148
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
149
|
+
|:---|:---|:---|:---|
|
|
150
|
+
|customClass|自定义css类|String|undefined|
|
|
151
|
+
|confirmLoading|确定按钮的加载状态|Boolean|false|
|
|
152
|
+
|margin|弹窗 margin|String|undefined|
|
|
153
|
+
|bodyPadding|内容 padding|String|undefined|
|
|
154
|
+
|bodyMinHeight|内容最小高度|String|undefined|
|
|
155
|
+
|allowDrag|是否允许拖拽|Boolean|true|
|
|
156
|
+
|confirmText|确定按钮文本|String|'确定'|
|
|
157
|
+
|cancelText|取消按钮文本|String|'取消'|
|
|
158
|
+
|
|
159
|
+
### 抽屉 EaDrawer
|
|
160
|
+
继承 el-drawer，允许少量修改布局，简化按钮
|
|
161
|
+
绑定confirm事件，出现确定按钮；绑定cancel事件，出现取消按钮
|
|
162
|
+
#### props
|
|
163
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
164
|
+
|:---|:---|:---|:---|
|
|
165
|
+
|customClass|自定义css类|String|undefined|
|
|
166
|
+
|confirmLoading|确定按钮的加载状态|Boolean|false|
|
|
167
|
+
|width|抽屉宽度|String|'720px'|
|
|
168
|
+
|bodyPadding|内容 padding|String|'20px'|
|
|
169
|
+
|headerHeight|标题高度|String|'70px'|
|
|
170
|
+
|footerHeight|底部高度|String|'70px'|
|
|
171
|
+
|confirmText|确定按钮文本|String|'确定'|
|
|
172
|
+
|cancelText|取消按钮文本|String|'取消'|
|
|
173
|
+
|
|
174
|
+
### 数字输入框 EaNumber
|
|
175
|
+
使样式与 el-input 相似
|
|
176
|
+
|
|
177
|
+
### 气泡框 EaPopover
|
|
178
|
+
函数式Popover，允许异步调用
|
|
179
|
+
#### props
|
|
180
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
181
|
+
|:---|:---|:---|:---|
|
|
182
|
+
|reference|参考dom节点|HTMLElement|undefined|
|
|
183
|
+
|offset|偏移|Number|0|
|
|
184
|
+
|mountedCallback|加载后回调，方便使用|Function|undefined|
|
|
185
|
+
#### slots
|
|
186
|
+
| 插槽名 | 默认值 | 说明 |
|
|
187
|
+
|:---|:---|:---|
|
|
188
|
+
| default | 无 | 内容插槽 <br> (refresh, close) 允许刷新和关闭气泡框 |
|
|
189
|
+
|
|
190
|
+
### 单选框 EaRadio
|
|
191
|
+
允许绑定数据和异步数据，允许默认选中
|
|
192
|
+
#### props
|
|
193
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
194
|
+
|:---|:---|:---|:---|
|
|
195
|
+
|data|数据|Array|undefined|
|
|
196
|
+
|asyncData|异步数据|Function|undefined|
|
|
197
|
+
|props|配置选项|Object|undefined|
|
|
198
|
+
|defaultFirst|是否默认选中第一项|Boolean|false|
|
|
199
|
+
|innerRadio|绑定至内部-radio|Object|undefined|
|
|
200
|
+
|type|radio类型|String|undefined|
|
|
201
|
+
|
|
202
|
+
### 开关 EaSwitch
|
|
203
|
+
额外支 size="mini" 尺寸
|
|
204
|
+
|
|
205
|
+
### 滚动容器 EaScrollbar
|
|
206
|
+
el-scrollbar 衍生，优化样式
|
|
207
|
+
#### props
|
|
208
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
209
|
+
|:---|:---|:---|:---|
|
|
210
|
+
|wrapStyle|wrap样式|String|undefined|
|
|
211
|
+
|
|
212
|
+
### 虚拟滚动 EaVirtualScroll
|
|
213
|
+
#### props
|
|
214
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
215
|
+
|:---|:---|:---|:---|
|
|
216
|
+
|enableVirtualScroll|是否开启虚拟滚动|Boolean \| String|auto|
|
|
217
|
+
|options|选项列表|Array| [] |
|
|
218
|
+
|itemSize|单项高度|Number|30|
|
|
219
|
+
|redundancy|渲染总数，影响流畅度和性能|Number|60|
|
|
220
|
+
|
|
221
|
+
### JsonSchema编辑器 EaJsonSchema
|
|
222
|
+
#### props
|
|
223
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
224
|
+
|:---|:---|:---|:---|
|
|
225
|
+
|value / v-model|json-schema 数据|Object|{}|
|
|
226
|
+
|height|组件高度|Number \| String| auto |
|
|
227
|
+
|maxHeight|当自动高度时，限制最大高度|Number| 500 |
|
|
228
|
+
|itemSize|单项高度|Number|32|
|
|
229
|
+
|allowEdit|是否允许编辑|Boolean|true|
|
|
230
|
+
|checkbox|是否开启多选列|Boolean|false|
|
|
231
|
+
|disableCheckbox|是否禁用选择（只读）|Boolean|false|
|
|
232
|
+
|columnFormat|对原有的column进行过滤|Function|column => column|
|
|
233
|
+
|rootAlias|根节点别名|String|root|
|
|
234
|
+
|advancedConfChunk|高级配置构造函数回调，可自由设置高级配置表单|Function|undefined|
|
|
235
|
+
#### methods
|
|
236
|
+
| 方法名 | 说明 | 参数 |
|
|
237
|
+
|:---|:---|:---|
|
|
238
|
+
| validate | 数据验证，仅验证prop不能为空 | 无 |
|
|
239
|
+
| getData | 获取数据（配置结果） | 无 |
|
|
240
|
+
| getChecked | 获取选中项 | 无 |
|
|
241
|
+
| setChecked | 设置选中项 | 选中项schema路径列表 |
|
|
242
|
+
| getSchemaPath | 获取schema路径 | __state.prefix |
|
|
243
|
+
| getDataPath | 获取data路径 | __state.prefix, callback |
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
### 下拉框 EaSelect
|
|
247
|
+
允许异步数据，允许大数据量虚拟滚动
|
|
248
|
+
#### props
|
|
249
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
250
|
+
|:---|:---|:---|:---|
|
|
251
|
+
|value / v-model|绑定值|String \| Number \| Array|undefined|
|
|
252
|
+
|label|额外名称绑定，允许.sync|String|undefined|
|
|
253
|
+
|data|选项数据|Array|[]|
|
|
254
|
+
|asyncParams|异步参数|undefined|undefined|
|
|
255
|
+
|asyncData|异步数据，允许异步参数|Function|undefined|
|
|
256
|
+
|props|配置选项|Object|undefined|
|
|
257
|
+
|props.desc|描述列字段名，将影响过滤方法|String|undefined|
|
|
258
|
+
|itemMaxWidth|单项[label,value]最大宽度|Number \| Array|150|
|
|
259
|
+
|popperClass|弹出框自定义css类|String|undefined|
|
|
260
|
+
|showCheckAll|多选时是否显示全选按钮|Boolean|false|
|
|
261
|
+
#### slots
|
|
262
|
+
| 插槽名 | 默认值 | 说明 |
|
|
263
|
+
|:---|:---|:---|
|
|
264
|
+
| prefix | 无 | 输入框前缀 |
|
|
265
|
+
| empty | 无 | 空数据 |
|
|
266
|
+
| before-option | 无 | 选项之前 |
|
|
267
|
+
| after-option | 无 | 选项之后 |
|
|
268
|
+
|
|
269
|
+
### 分割面板 EaSplit
|
|
270
|
+
分割面板，允许拖拽
|
|
271
|
+
#### props
|
|
272
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
273
|
+
|:---|:---|:---|:---|
|
|
274
|
+
|default|默认分割比例|Number|0.2
|
|
275
|
+
|min|最小分割比例|Number|0.2
|
|
276
|
+
|max|最大分割比例|Number|0.5
|
|
277
|
+
#### slots
|
|
278
|
+
| 插槽名 | 默认值 | 说明 |
|
|
279
|
+
|:---|:---|:---|
|
|
280
|
+
| left | 无 |左侧面板|
|
|
281
|
+
| center | 默认手柄 |中间分割手柄 |
|
|
282
|
+
| right | 无 |右侧面板 |
|
|
283
|
+
|
|
284
|
+
### 树 EaTree
|
|
285
|
+
与el-tree相比，带搜索框和搜索方法，带scrollbar，允许设置剩余高度，异步数据
|
|
286
|
+
#### props
|
|
287
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
288
|
+
|:---|:---|:---|:---|
|
|
289
|
+
|inputPlaceholder|搜索框的占位内容|String|请输入关键字搜索|
|
|
290
|
+
|remainingHeight|剩余高度|Number|200|
|
|
291
|
+
|props|配置选项|Object|undefined|
|
|
292
|
+
|data|数据|Array|undefined|
|
|
293
|
+
|asyncData|异步数据|Function|undefined|
|
|
294
|
+
|filterNodeMethod|过滤方法|Function|undefined|
|
|
295
|
+
|emptyText|空数据时文字描述|String|暂无数据|
|
|
296
|
+
|title|标题|String|undefined|
|
|
297
|
+
|border|是否显示边框|Boolean|false|
|
|
298
|
+
#### slots
|
|
299
|
+
| 插槽名 | 默认值 | 说明 |
|
|
300
|
+
|:---|:---|:---|
|
|
301
|
+
| default | 无 |自定义树节点的内容，参数为 { node, data }|
|
|
302
|
+
| input-prefix | 无 |搜索框前缀|
|
|
303
|
+
| input-append | 无 |搜索框后缀|
|
|
304
|
+
| header | 无 |自定义标题|
|
|
305
|
+
| header-append | 无 |自定义标题后缀|
|
|
306
|
+
|
|
307
|
+
### 虚拟树 EaDataTree
|
|
308
|
+
#### props
|
|
309
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
310
|
+
|:---|:---|:---|:---|
|
|
311
|
+
|data|(树)数据|Array|[]|
|
|
312
|
+
|props|配置项|Object|见下文|
|
|
313
|
+
| props.label|显示名称|String|label|
|
|
314
|
+
| props.value|实际值|String|value|
|
|
315
|
+
| props.children|子集|String|children|
|
|
316
|
+
| props.hasChildren|手动指定是否含有子集<br>配合 loadMethod 使用|String|undefined|
|
|
317
|
+
|height|组件高度|Number \| String| auto |
|
|
318
|
+
|maxHeight|当自动高度时，限制最大高度|Number| 500 |
|
|
319
|
+
|itemSize|单项高度|Number|32|
|
|
320
|
+
|redundancy|渲染总数，影响流畅度和性能|Number|60|
|
|
321
|
+
|checkbox|是否显示多选框|Boolean|false|
|
|
322
|
+
|disableCheckbox|是否禁止多选框|Boolean|false|
|
|
323
|
+
|noDataText|无数据时的文本|String|暂无数据|
|
|
324
|
+
|loadMethod|展开节点时异步加载的方法|Function<br> () => Promise\<any[]\>|undefined|
|
|
325
|
+
|rowKey|行唯一key|String|props.value|
|
|
326
|
+
|border|是否显示边框|Boolean|false|
|
|
327
|
+
|stripe|是否需要斑马纹|Boolean|false|
|
|
328
|
+
#### methods
|
|
329
|
+
| 方法名 | 说明 | 参数 |
|
|
330
|
+
|:---|:---|:---|
|
|
331
|
+
| getChecked | 获取选中项 | 无 |
|
|
332
|
+
| setChecked | 设置选中项 | (树)数据（以`props.value`匹配） |
|
|
333
|
+
| setCheckedKeys | 设置选中项 | rowKey: string[]（以`rowKey`匹配）, state: boolean |
|
|
334
|
+
| filter | 过滤树 | keyword:string 或 callback: () => boolean |
|
|
335
|
+
#### events
|
|
336
|
+
| 事件名 | 说明 | 参数 |
|
|
337
|
+
|:---|:---|:---|
|
|
338
|
+
|selection-change|选中项变化|:---|
|
|
339
|
+
|expand| 操作展开收起时 | 操作的节点(node) |
|
|
340
|
+
|expanded| 操作展开收起后 | 操作的节点(state, node, isAsync, data) |
|
|
341
|
+
#### slots
|
|
342
|
+
| 插槽名 | 默认值 | 说明 |
|
|
343
|
+
|:---|:---|:---|
|
|
344
|
+
| default | 单项（行） | 自定义行内容，跟随枝干 |
|
|
345
|
+
| row | 单项（行） | 自定义行内容，脱离枝干 |
|
|
346
|
+
|
|
347
|
+
### 列表 EaList
|
|
348
|
+
#### props
|
|
349
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
350
|
+
|:---|:---|:---|:---|
|
|
351
|
+
|data|数据|Array|undefined|
|
|
352
|
+
|pageRequest|分页请求|Function|undefined|
|
|
353
|
+
|initRequest|是否初始化请求|Boolean|true|
|
|
354
|
+
|itemSize|单项高度|Number|30|
|
|
355
|
+
|remainingHeight|剩余高度|Number|200|
|
|
356
|
+
|page|分页信息|Object|undefined|
|
|
357
|
+
|redundancy|渲染总数，影响流畅度和性能|Number|60|
|
|
358
|
+
#### slots
|
|
359
|
+
| 插槽名 | 默认值 | 说明 |
|
|
360
|
+
|:---|:---|:---|
|
|
361
|
+
| default | 单项（行） | 自定义行内容 |
|
|
362
|
+
|
|
363
|
+
### 虚拟数据表格 EaDataTable
|
|
364
|
+
#### props
|
|
365
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
366
|
+
|:---|:---|:---|:---|
|
|
367
|
+
|data|数据|Array|undefined|
|
|
368
|
+
|column|列信息|Array|undefined|
|
|
369
|
+
|pageRequest|分页请求|Function|undefined|
|
|
370
|
+
|initRequest|是否初始化请求|Boolean|true|
|
|
371
|
+
|itemSize|单项高度|Number|30|
|
|
372
|
+
|maxHeight|最大高度|Number|300|
|
|
373
|
+
|page|分页信息|Object|undefined|
|
|
374
|
+
|redundancy|渲染总数，影响流畅度和性能|Number|undefined|
|
|
375
|
+
|border|是否显示边框|Boolean|false|
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
### 描述列表 EaDesc
|
|
379
|
+
#### props
|
|
380
|
+
| 属性名 | 含义 | 类型 | 默认值 |
|
|
381
|
+
|:---|:---|:---|:---|
|
|
382
|
+
|title|标题|String|undefined|
|
|
383
|
+
|data|数据|Object|必填|
|
|
384
|
+
|column|列信息|Array|必填|
|
|
385
|
+
|column[].bind.class|单独设置类|Object|undefined|
|
|
386
|
+
|column[].bind.style|单独设置样式|Object|undefined|
|
|
387
|
+
|labelWidth|标签宽度|Number \| String|100|
|
|
388
|
+
|split|分割数量|Number|2|
|
|
389
|
+
|diff|有差异的列信息|Array|undefined|
|
|
390
|
+
|gutter|间隔|Number|0|
|
|
391
|
+
|isNilCellText|当单元格内容为空时的替代字符|String\|Boolean|undefined|
|
|
392
|
+
|
|
393
|
+
### 弹窗文件上传 EaFileUpload
|
|
394
|
+
#### props
|
|
395
|
+
| 属性名 | 含义 | 类型 | 默认值 |
|
|
396
|
+
|:---|:---|:---|:---|
|
|
397
|
+
|title|标题|String|文件上传|
|
|
398
|
+
|multiple|是否多选|Boolean|false|
|
|
399
|
+
|limit|最大数量限制|Number|1|
|
|
400
|
+
|suffix|允许的文件后缀|String|xlsx,xls|
|
|
401
|
+
|maxSize|允许的文件大小，单位M|Number|100|
|
|
402
|
+
|httpRequest|文件上传|Function|必填|
|
|
403
|
+
|httpTemplate|模板下载|Function|undefined|
|
|
404
|
+
|httpFinally|请求完成|Function|undefined|
|
|
405
|
+
|innerUploadBind|绑定至el-upload|Object|undefined|
|
|
406
|
+
|innerUploadOn|绑定至el-upload|Object|undefined|
|