@vxe-ui/plugin-render-antd 4.3.1 → 4.4.1
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/LICENSE +20 -20
- package/README.md +171 -171
- package/dist/index.umd.js +117 -19
- package/dist/index.umd.min.js +1 -1
- package/es/index.esm.js +3 -3
- package/es/index.js +3 -3
- package/es/table/index.js +92 -4
- package/lib/index.common.js +3 -3
- package/lib/index.js +3 -3
- package/lib/index.umd.js +117 -19
- package/lib/index.umd.min.js +1 -1
- package/lib/table/index.js +109 -11
- package/package.json +76 -77
- package/src/form/index.ts +313 -313
- package/src/form-design/checkbox-widget.ts +165 -165
- package/src/form-design/date-picker-widget.ts +145 -145
- package/src/form-design/index.ts +101 -101
- package/src/form-design/input-widget.ts +145 -145
- package/src/form-design/number-input-widget.ts +145 -145
- package/src/form-design/radio-widget.ts +165 -165
- package/src/form-design/select-widget.ts +157 -157
- package/src/form-design/switch-widget.ts +141 -141
- package/src/form-design/textarea-widget.ts +149 -149
- package/src/form-design/use.ts +255 -255
- package/src/index.ts +118 -118
- package/src/store/index.ts +5 -5
- package/src/table/index.ts +631 -544
- package/src/util/comp.ts +10 -10
- package/types/index.d.ts +19 -19
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2019 Xu Liangzhan
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2019 Xu Liangzhan
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,171 +1,171 @@
|
|
|
1
|
-
# @vxe-ui/plugin-render-antd
|
|
2
|
-
|
|
3
|
-
[Vxe UI](https://vxeui.com/) plug-in for compatibility with the [ant-design-vue](https://www.npmjs.com/package/ant-design-vue) component.
|
|
4
|
-
|
|
5
|
-
## Compatibility
|
|
6
|
-
|
|
7
|
-
It corresponds to [vxe-table v4](https://www.npmjs.com/package/vxe-table) or [vxe-pc-ui v4](https://www.npmjs.com/package/vxe-pc-ui)
|
|
8
|
-
|
|
9
|
-
## Installing
|
|
10
|
-
|
|
11
|
-
```shell
|
|
12
|
-
npm install @vxe-ui/plugin-render-antd
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
```javascript
|
|
16
|
-
// ...
|
|
17
|
-
// Use vxe-pc-ui
|
|
18
|
-
import { VxeUI } from 'vxe-pc-ui'
|
|
19
|
-
// Use vxe-table
|
|
20
|
-
// import { VxeUI } from 'vxe-table'
|
|
21
|
-
import VxeUIPluginRenderAntd from '@vxe-ui/plugin-render-antd'
|
|
22
|
-
import '@vxe-ui/plugin-render-antd/dist/style.css'
|
|
23
|
-
// ...
|
|
24
|
-
|
|
25
|
-
VxeUI.use(VxeUIPluginRenderAntd)
|
|
26
|
-
// VxeUI.use(VxeUIPluginRenderAntd, {
|
|
27
|
-
// // Antd,
|
|
28
|
-
// // prefixCls: 'ant'
|
|
29
|
-
// })
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Import on-demand
|
|
33
|
-
|
|
34
|
-
```javascript
|
|
35
|
-
// ...
|
|
36
|
-
import VxeUIPluginRenderAntd from '@vxe-ui/plugin-render-antd'
|
|
37
|
-
// ...
|
|
38
|
-
|
|
39
|
-
// If it is not a global installation, then a single import is required.
|
|
40
|
-
import { AInput, AInputNumber, ASelect } from 'ant-design-vue'
|
|
41
|
-
// ...
|
|
42
|
-
VxeUIPluginRenderAntd.component(AInput)
|
|
43
|
-
VxeUIPluginRenderAntd.component(AInputNumber)
|
|
44
|
-
VxeUIPluginRenderAntd.component(ASelect)
|
|
45
|
-
// ...
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
## API
|
|
50
|
-
|
|
51
|
-
### cell-render 默认的渲染器配置项说明
|
|
52
|
-
|
|
53
|
-
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
54
|
-
|------|------|-----|-----|-----|
|
|
55
|
-
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASwitch, ARate, AButton, AButtons | — |
|
|
56
|
-
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
57
|
-
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
58
|
-
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
59
|
-
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
60
|
-
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
61
|
-
| events | 渲染组件附加事件,参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
|
|
62
|
-
|
|
63
|
-
### edit-render 可编辑渲染器配置项说明
|
|
64
|
-
|
|
65
|
-
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
66
|
-
|------|------|-----|-----|-----|
|
|
67
|
-
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ACascader, ADatePicker, AMonthPicker, ARangePicker, AWeekPicker, ATimePicker, ATreeSelect, ASwitch, ARate, AButton, AButtons | — |
|
|
68
|
-
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
69
|
-
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
70
|
-
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
71
|
-
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
72
|
-
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
73
|
-
| events | 渲染组件附加事件,参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
|
|
74
|
-
|
|
75
|
-
### filter-render 筛选渲染器配置项说明
|
|
76
|
-
|
|
77
|
-
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
78
|
-
|------|------|-----|-----|-----|
|
|
79
|
-
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate | — |
|
|
80
|
-
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
81
|
-
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
82
|
-
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
83
|
-
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
84
|
-
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
85
|
-
| events | 渲染组件附加事件,参数为 ( {}, ...Component arguments ) | Object | — | — |
|
|
86
|
-
|
|
87
|
-
### item-render 表单-项选渲染器配置项说明
|
|
88
|
-
|
|
89
|
-
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
90
|
-
|------|------|-----|-----|-----|
|
|
91
|
-
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate, ARadio, ACheckbox, AButton, AButtons | — |
|
|
92
|
-
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
93
|
-
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
94
|
-
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
95
|
-
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
96
|
-
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
97
|
-
| events | 渲染组件附加事件,参数为 ( {}, ...Component arguments ) | Object | — | — |
|
|
98
|
-
|
|
99
|
-
### 表单设计器配置项
|
|
100
|
-
|
|
101
|
-
| 描述 |
|
|
102
|
-
|------|
|
|
103
|
-
| 'AInputWidget', 'ATextareaWidget', 'ANumberInputWidget', 'ADatePickerWidget', 'ASelectWidget', 'ARadioWidget', 'ACheckboxWidget', 'ASwitchWidget' |
|
|
104
|
-
|
|
105
|
-
## Table Cell demo
|
|
106
|
-
|
|
107
|
-
```html
|
|
108
|
-
<vxe-table
|
|
109
|
-
height="600"
|
|
110
|
-
:data="tableData"
|
|
111
|
-
:edit-config="{trigger: 'click', mode: 'cell'}">
|
|
112
|
-
<vxe-column field="name" title="Name" :edit-render="{name: 'AInput'}"></vxe-column>
|
|
113
|
-
<vxe-column field="age" title="Age" :edit-render="{name: 'AInputNumber'}"></vxe-column>
|
|
114
|
-
<vxe-column field="date" title="Date" width="200" :edit-render="{name: 'ADatePicker'}"></vxe-column>
|
|
115
|
-
</vxe-table>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
```javascript
|
|
119
|
-
export default {
|
|
120
|
-
data () {
|
|
121
|
-
return {
|
|
122
|
-
tableData: [
|
|
123
|
-
{ id: 100, name: 'test0', age: 28, sex: '1', date: '' },
|
|
124
|
-
{ id: 101, name: 'test1', age: 32, sex: '0', date: '' },
|
|
125
|
-
{ id: 102, name: 'test2', age: 36, sex: '1', date: '' }
|
|
126
|
-
]
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
## Table Filter demo
|
|
133
|
-
|
|
134
|
-
```html
|
|
135
|
-
<template>
|
|
136
|
-
<vxe-table
|
|
137
|
-
height="600"
|
|
138
|
-
:data="tableData">
|
|
139
|
-
<vxe-column field="name" title="Name":filters="nameOptions" :filter-render="{name: 'AInput'}"></vxe-column>
|
|
140
|
-
<vxe-column field="age" title="Age"></vxe-column>
|
|
141
|
-
<vxe-column field="date" title="Date" ></vxe-column>
|
|
142
|
-
</vxe-table>
|
|
143
|
-
</template>
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
```javascript
|
|
147
|
-
export default {
|
|
148
|
-
data () {
|
|
149
|
-
return {
|
|
150
|
-
nameOptions: [
|
|
151
|
-
{ data: '' }
|
|
152
|
-
],
|
|
153
|
-
tableData: [
|
|
154
|
-
{ id: 100, name: 'test0', age: 28, date: '' },
|
|
155
|
-
{ id: 101, name: 'test1', age: 32, date: '' },
|
|
156
|
-
{ id: 102, name: 'test2', age: 36, date: '' }
|
|
157
|
-
]
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
## Contributors
|
|
164
|
-
|
|
165
|
-
Thank you to everyone who contributed to this project.
|
|
166
|
-
|
|
167
|
-
[](https://github.com/x-extends/vxe-ui-plugins/graphs/contributors)
|
|
168
|
-
|
|
169
|
-
## License
|
|
170
|
-
|
|
171
|
-
[MIT](LICENSE) © 2019-present, Xu Liangzhan
|
|
1
|
+
# @vxe-ui/plugin-render-antd
|
|
2
|
+
|
|
3
|
+
[Vxe UI](https://vxeui.com/) plug-in for compatibility with the [ant-design-vue](https://www.npmjs.com/package/ant-design-vue) component.
|
|
4
|
+
|
|
5
|
+
## Compatibility
|
|
6
|
+
|
|
7
|
+
It corresponds to [vxe-table v4](https://www.npmjs.com/package/vxe-table) or [vxe-pc-ui v4](https://www.npmjs.com/package/vxe-pc-ui)
|
|
8
|
+
|
|
9
|
+
## Installing
|
|
10
|
+
|
|
11
|
+
```shell
|
|
12
|
+
npm install @vxe-ui/plugin-render-antd
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
// ...
|
|
17
|
+
// Use vxe-pc-ui
|
|
18
|
+
import { VxeUI } from 'vxe-pc-ui'
|
|
19
|
+
// Use vxe-table
|
|
20
|
+
// import { VxeUI } from 'vxe-table'
|
|
21
|
+
import VxeUIPluginRenderAntd from '@vxe-ui/plugin-render-antd'
|
|
22
|
+
import '@vxe-ui/plugin-render-antd/dist/style.css'
|
|
23
|
+
// ...
|
|
24
|
+
|
|
25
|
+
VxeUI.use(VxeUIPluginRenderAntd)
|
|
26
|
+
// VxeUI.use(VxeUIPluginRenderAntd, {
|
|
27
|
+
// // Antd,
|
|
28
|
+
// // prefixCls: 'ant'
|
|
29
|
+
// })
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Import on-demand
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
// ...
|
|
36
|
+
import VxeUIPluginRenderAntd from '@vxe-ui/plugin-render-antd'
|
|
37
|
+
// ...
|
|
38
|
+
|
|
39
|
+
// If it is not a global installation, then a single import is required.
|
|
40
|
+
import { AInput, AInputNumber, ASelect } from 'ant-design-vue'
|
|
41
|
+
// ...
|
|
42
|
+
VxeUIPluginRenderAntd.component(AInput)
|
|
43
|
+
VxeUIPluginRenderAntd.component(AInputNumber)
|
|
44
|
+
VxeUIPluginRenderAntd.component(ASelect)
|
|
45
|
+
// ...
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## API
|
|
50
|
+
|
|
51
|
+
### cell-render 默认的渲染器配置项说明
|
|
52
|
+
|
|
53
|
+
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
54
|
+
|------|------|-----|-----|-----|
|
|
55
|
+
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASwitch, ARate, AButton, AButtons | — |
|
|
56
|
+
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
57
|
+
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
58
|
+
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
59
|
+
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
60
|
+
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
61
|
+
| events | 渲染组件附加事件,参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
|
|
62
|
+
|
|
63
|
+
### edit-render 可编辑渲染器配置项说明
|
|
64
|
+
|
|
65
|
+
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
66
|
+
|------|------|-----|-----|-----|
|
|
67
|
+
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ACascader, ADatePicker, AMonthPicker, ARangePicker, AWeekPicker, ATimePicker, ATreeSelect, ASwitch, ARate, AButton, AButtons | — |
|
|
68
|
+
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
69
|
+
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
70
|
+
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
71
|
+
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
72
|
+
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
73
|
+
| events | 渲染组件附加事件,参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
|
|
74
|
+
|
|
75
|
+
### filter-render 筛选渲染器配置项说明
|
|
76
|
+
|
|
77
|
+
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
78
|
+
|------|------|-----|-----|-----|
|
|
79
|
+
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate | — |
|
|
80
|
+
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
81
|
+
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
82
|
+
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
83
|
+
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
84
|
+
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
85
|
+
| events | 渲染组件附加事件,参数为 ( {}, ...Component arguments ) | Object | — | — |
|
|
86
|
+
|
|
87
|
+
### item-render 表单-项选渲染器配置项说明
|
|
88
|
+
|
|
89
|
+
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
|
90
|
+
|------|------|-----|-----|-----|
|
|
91
|
+
| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate, ARadio, ACheckbox, AButton, AButtons | — |
|
|
92
|
+
| props | 渲染组件附加属性,参数请查看被渲染的 Component props | Object | — | {} |
|
|
93
|
+
| options | 只对 name=ASelect 有效,下拉组件选项列表 | Array | — | [] |
|
|
94
|
+
| optionProps | 只对 name=ASelect 有效,下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
|
|
95
|
+
| optionGroups | 只对 name=ASelect 有效,下拉组件分组选项列表 | Array | — | [] |
|
|
96
|
+
| optionGroupProps | 只对 name=ASelect 有效,下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
|
|
97
|
+
| events | 渲染组件附加事件,参数为 ( {}, ...Component arguments ) | Object | — | — |
|
|
98
|
+
|
|
99
|
+
### 表单设计器配置项
|
|
100
|
+
|
|
101
|
+
| 描述 |
|
|
102
|
+
|------|
|
|
103
|
+
| 'AInputWidget', 'ATextareaWidget', 'ANumberInputWidget', 'ADatePickerWidget', 'ASelectWidget', 'ARadioWidget', 'ACheckboxWidget', 'ASwitchWidget' |
|
|
104
|
+
|
|
105
|
+
## Table Cell demo
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<vxe-table
|
|
109
|
+
height="600"
|
|
110
|
+
:data="tableData"
|
|
111
|
+
:edit-config="{trigger: 'click', mode: 'cell'}">
|
|
112
|
+
<vxe-column field="name" title="Name" :edit-render="{name: 'AInput'}"></vxe-column>
|
|
113
|
+
<vxe-column field="age" title="Age" :edit-render="{name: 'AInputNumber'}"></vxe-column>
|
|
114
|
+
<vxe-column field="date" title="Date" width="200" :edit-render="{name: 'ADatePicker'}"></vxe-column>
|
|
115
|
+
</vxe-table>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
```javascript
|
|
119
|
+
export default {
|
|
120
|
+
data () {
|
|
121
|
+
return {
|
|
122
|
+
tableData: [
|
|
123
|
+
{ id: 100, name: 'test0', age: 28, sex: '1', date: '' },
|
|
124
|
+
{ id: 101, name: 'test1', age: 32, sex: '0', date: '' },
|
|
125
|
+
{ id: 102, name: 'test2', age: 36, sex: '1', date: '' }
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## Table Filter demo
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<template>
|
|
136
|
+
<vxe-table
|
|
137
|
+
height="600"
|
|
138
|
+
:data="tableData">
|
|
139
|
+
<vxe-column field="name" title="Name":filters="nameOptions" :filter-render="{name: 'AInput'}"></vxe-column>
|
|
140
|
+
<vxe-column field="age" title="Age"></vxe-column>
|
|
141
|
+
<vxe-column field="date" title="Date" ></vxe-column>
|
|
142
|
+
</vxe-table>
|
|
143
|
+
</template>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
```javascript
|
|
147
|
+
export default {
|
|
148
|
+
data () {
|
|
149
|
+
return {
|
|
150
|
+
nameOptions: [
|
|
151
|
+
{ data: '' }
|
|
152
|
+
],
|
|
153
|
+
tableData: [
|
|
154
|
+
{ id: 100, name: 'test0', age: 28, date: '' },
|
|
155
|
+
{ id: 101, name: 'test1', age: 32, date: '' },
|
|
156
|
+
{ id: 102, name: 'test2', age: 36, date: '' }
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Contributors
|
|
164
|
+
|
|
165
|
+
Thank you to everyone who contributed to this project.
|
|
166
|
+
|
|
167
|
+
[](https://github.com/x-extends/vxe-ui-plugins/graphs/contributors)
|
|
168
|
+
|
|
169
|
+
## License
|
|
170
|
+
|
|
171
|
+
[MIT](LICENSE) © 2019-present, Xu Liangzhan
|
package/dist/index.umd.js
CHANGED
|
@@ -213,22 +213,83 @@
|
|
|
213
213
|
return getCellLabelVNs(renderOpts, params, cellValue);
|
|
214
214
|
};
|
|
215
215
|
}
|
|
216
|
-
function
|
|
216
|
+
function handleFormatSelect(renderOpts, renderParams) {
|
|
217
|
+
var cellValue = renderParams.cellValue;
|
|
218
|
+
return handleSelectCellValue(cellValue, renderOpts);
|
|
219
|
+
}
|
|
220
|
+
function handleSetSelectValue(renderOpts, renderParams) {
|
|
221
|
+
var row = renderParams.row,
|
|
222
|
+
column = renderParams.column,
|
|
223
|
+
cellValue = renderParams.cellValue;
|
|
224
|
+
var field = column.field;
|
|
225
|
+
if (field) {
|
|
226
|
+
var options = renderOpts.options,
|
|
227
|
+
optionGroups = renderOpts.optionGroups,
|
|
228
|
+
_renderOpts$optionPro = renderOpts.optionProps,
|
|
229
|
+
optionProps = _renderOpts$optionPro === void 0 ? {} : _renderOpts$optionPro,
|
|
230
|
+
_renderOpts$optionGro = renderOpts.optionGroupProps,
|
|
231
|
+
optionGroupProps = _renderOpts$optionGro === void 0 ? {} : _renderOpts$optionGro,
|
|
232
|
+
props = renderOpts.props;
|
|
233
|
+
if (isEmptyValue(cellValue)) {
|
|
234
|
+
_xeUtils["default"].set(row, field, props && props.mode === 'multiple' ? [] : null);
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
var isMultiVal = _xeUtils["default"].indexOf("".concat(cellValue), ',') > -1;
|
|
238
|
+
var labelProp = optionProps.label || 'label';
|
|
239
|
+
var valueProp = optionProps.value || 'value';
|
|
240
|
+
var labelMpas = {};
|
|
241
|
+
if (optionGroups && optionGroups.length) {
|
|
242
|
+
var groupOptions = optionGroupProps.options || 'options';
|
|
243
|
+
for (var i = 0; i < optionGroups.length; i++) {
|
|
244
|
+
var opts = optionGroups[i][groupOptions] || {};
|
|
245
|
+
for (var j = 0; j < opts.length; j++) {
|
|
246
|
+
var item = opts[j];
|
|
247
|
+
if (isMultiVal) {
|
|
248
|
+
labelMpas[item[labelProp]] = item;
|
|
249
|
+
/* eslint-disable eqeqeq */
|
|
250
|
+
} else if (item[labelProp] == cellValue) {
|
|
251
|
+
_xeUtils["default"].set(row, field, item[valueProp]);
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
} else {
|
|
257
|
+
if (options) {
|
|
258
|
+
for (var _i = 0; _i < options.length; _i++) {
|
|
259
|
+
var _item = options[_i];
|
|
260
|
+
if (isMultiVal) {
|
|
261
|
+
labelMpas[_item[labelProp]] = _item;
|
|
262
|
+
/* eslint-disable eqeqeq */
|
|
263
|
+
} else if (_item[labelProp] == cellValue) {
|
|
264
|
+
_xeUtils["default"].set(row, field, _item[valueProp]);
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
if (isMultiVal) {
|
|
271
|
+
_xeUtils["default"].set(row, field, (isMultiVal ? cellValue.split(',') : [cellValue]).map(function (label) {
|
|
272
|
+
var item = labelMpas[label];
|
|
273
|
+
return item ? item[valueProp] : label;
|
|
274
|
+
}));
|
|
275
|
+
} else {
|
|
276
|
+
_xeUtils["default"].set(row, field, cellValue);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
function handleSelectCellValue(cellValue, renderOpts) {
|
|
217
281
|
var _renderOpts$options = renderOpts.options,
|
|
218
282
|
options = _renderOpts$options === void 0 ? [] : _renderOpts$options,
|
|
219
283
|
optionGroups = renderOpts.optionGroups,
|
|
220
284
|
_renderOpts$props2 = renderOpts.props,
|
|
221
285
|
props = _renderOpts$props2 === void 0 ? {} : _renderOpts$props2,
|
|
222
|
-
_renderOpts$
|
|
223
|
-
optionProps = _renderOpts$
|
|
224
|
-
_renderOpts$
|
|
225
|
-
optionGroupProps = _renderOpts$
|
|
226
|
-
var row = params.row,
|
|
227
|
-
column = params.column;
|
|
286
|
+
_renderOpts$optionPro2 = renderOpts.optionProps,
|
|
287
|
+
optionProps = _renderOpts$optionPro2 === void 0 ? {} : _renderOpts$optionPro2,
|
|
288
|
+
_renderOpts$optionGro2 = renderOpts.optionGroupProps,
|
|
289
|
+
optionGroupProps = _renderOpts$optionGro2 === void 0 ? {} : _renderOpts$optionGro2;
|
|
228
290
|
var labelProp = optionProps.label || 'label';
|
|
229
291
|
var valueProp = optionProps.value || 'value';
|
|
230
292
|
var groupOptions = optionGroupProps.options || 'options';
|
|
231
|
-
var cellValue = _xeUtils["default"].get(row, column.field);
|
|
232
293
|
if (!isEmptyValue(cellValue)) {
|
|
233
294
|
return _xeUtils["default"].map(props.mode === 'multiple' ? cellValue : [cellValue], optionGroups ? function (value) {
|
|
234
295
|
var selectItem;
|
|
@@ -250,6 +311,12 @@
|
|
|
250
311
|
}
|
|
251
312
|
return '';
|
|
252
313
|
}
|
|
314
|
+
function getSelectCellValue(renderOpts, params) {
|
|
315
|
+
var row = params.row,
|
|
316
|
+
column = params.column;
|
|
317
|
+
var cellValue = _xeUtils["default"].get(row, column.field);
|
|
318
|
+
return handleSelectCellValue(cellValue, renderOpts);
|
|
319
|
+
}
|
|
253
320
|
function getCascaderCellValue(renderOpts, params) {
|
|
254
321
|
var _renderOpts$props3 = renderOpts.props,
|
|
255
322
|
props = _renderOpts$props3 === void 0 ? {} : _renderOpts$props3;
|
|
@@ -456,14 +523,42 @@
|
|
|
456
523
|
}, ons))];
|
|
457
524
|
},
|
|
458
525
|
renderTableCell: function renderTableCell(renderOpts, params) {
|
|
459
|
-
|
|
526
|
+
var options = renderOpts.options,
|
|
527
|
+
optionGroups = renderOpts.optionGroups;
|
|
528
|
+
var $table = params.$table,
|
|
529
|
+
row = params.row,
|
|
530
|
+
column = params.column;
|
|
531
|
+
var opSize = options ? options.length : null;
|
|
532
|
+
var ogSize = optionGroups ? optionGroups.length : null;
|
|
533
|
+
if ($table.effectCellData) {
|
|
534
|
+
var _$table$effectCellDat = $table.effectCellData(row, column, {
|
|
535
|
+
key: 'render_table_cell',
|
|
536
|
+
isChanged: function isChanged(_ref) {
|
|
537
|
+
var oldValue = _ref.oldValue,
|
|
538
|
+
cellValue = _ref.cellValue;
|
|
539
|
+
return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
|
|
540
|
+
},
|
|
541
|
+
setValue: function setValue(_ref2) {
|
|
542
|
+
var cellValue = _ref2.cellValue;
|
|
543
|
+
return [cellValue, opSize, ogSize];
|
|
544
|
+
},
|
|
545
|
+
getResult: function getResult(_ref3) {
|
|
546
|
+
var cellValue = _ref3.cellValue;
|
|
547
|
+
return handleSelectCellValue(cellValue, renderOpts);
|
|
548
|
+
}
|
|
549
|
+
}),
|
|
550
|
+
_cellResult = _$table$effectCellDat.cellResult;
|
|
551
|
+
return getCellLabelVNs(renderOpts, params, _cellResult);
|
|
552
|
+
}
|
|
553
|
+
var cellResult = getSelectCellValue(renderOpts, params);
|
|
554
|
+
return getCellLabelVNs(renderOpts, params, cellResult);
|
|
460
555
|
},
|
|
461
556
|
renderTableFilter: function renderTableFilter(renderOpts, params) {
|
|
462
557
|
var _renderOpts$options2 = renderOpts.options,
|
|
463
558
|
options = _renderOpts$options2 === void 0 ? [] : _renderOpts$options2,
|
|
464
559
|
optionGroups = renderOpts.optionGroups,
|
|
465
|
-
_renderOpts$
|
|
466
|
-
optionGroupProps = _renderOpts$
|
|
560
|
+
_renderOpts$optionGro3 = renderOpts.optionGroupProps,
|
|
561
|
+
optionGroupProps = _renderOpts$optionGro3 === void 0 ? {} : _renderOpts$optionGro3;
|
|
467
562
|
var groupOptions = optionGroupProps.options || 'options';
|
|
468
563
|
var column = params.column;
|
|
469
564
|
var attrs = renderOpts.attrs;
|
|
@@ -493,6 +588,9 @@
|
|
|
493
588
|
})));
|
|
494
589
|
}))];
|
|
495
590
|
},
|
|
591
|
+
tableCellFormatter: handleFormatSelect,
|
|
592
|
+
tableCellCopyMethod: handleFormatSelect,
|
|
593
|
+
tableCellPasteMethod: handleSetSelectValue,
|
|
496
594
|
tableFilterDefaultMethod: function tableFilterDefaultMethod(params) {
|
|
497
595
|
var option = params.option,
|
|
498
596
|
row = params.row,
|
|
@@ -2605,12 +2703,12 @@
|
|
|
2605
2703
|
function requireLib () {
|
|
2606
2704
|
if (hasRequiredLib) return lib;
|
|
2607
2705
|
hasRequiredLib = 1;
|
|
2608
|
-
(function (exports
|
|
2706
|
+
(function (exports) {
|
|
2609
2707
|
|
|
2610
|
-
Object.defineProperty(exports
|
|
2708
|
+
Object.defineProperty(exports, "__esModule", {
|
|
2611
2709
|
value: true
|
|
2612
2710
|
});
|
|
2613
|
-
exports
|
|
2711
|
+
exports["default"] = exports.VxeUIPluginRenderAntd = void 0;
|
|
2614
2712
|
var _table = requireTable();
|
|
2615
2713
|
var _form = requireForm();
|
|
2616
2714
|
var _formDesign = requireFormDesign();
|
|
@@ -2653,7 +2751,7 @@
|
|
|
2653
2751
|
}
|
|
2654
2752
|
return name;
|
|
2655
2753
|
}
|
|
2656
|
-
var VxeUIPluginRenderAntd = exports
|
|
2754
|
+
var VxeUIPluginRenderAntd = exports.VxeUIPluginRenderAntd = {
|
|
2657
2755
|
component: function component(comp) {
|
|
2658
2756
|
if (comp && comp.name) {
|
|
2659
2757
|
var kcName = _xeUtils["default"].kebabCase(comp.name);
|
|
@@ -2661,7 +2759,7 @@
|
|
|
2661
2759
|
_store.componentMaps[kcName] = comp;
|
|
2662
2760
|
_store.componentMaps[ccName] = comp;
|
|
2663
2761
|
} else {
|
|
2664
|
-
console.error('[@vxe-ui/plugin-render-antd 4.
|
|
2762
|
+
console.error('[@vxe-ui/plugin-render-antd 4.4.1] error component.', comp);
|
|
2665
2763
|
}
|
|
2666
2764
|
},
|
|
2667
2765
|
install: function install(VxeUI, options) {
|
|
@@ -2674,11 +2772,11 @@
|
|
|
2674
2772
|
var pVersion = 4;
|
|
2675
2773
|
var sVersion = 11;
|
|
2676
2774
|
if (!VxeUI.checkVersion(VxeUI.tableVersion, pVersion, sVersion)) {
|
|
2677
|
-
console.error("[@vxe-ui/plugin-render-antd 4.
|
|
2775
|
+
console.error("[@vxe-ui/plugin-render-antd 4.4.1] ".concat(VxeUI.getI18n('vxe.error.errorVersion', ["vxe-table@".concat(VxeUI.tableVersion || '?'), "vxe-table v".concat(pVersion, ".").concat(sVersion, "+")]), " https://vxeui.com/other4/#/plugin-render-antd/install"));
|
|
2678
2776
|
}
|
|
2679
2777
|
} else {
|
|
2680
2778
|
if (!/^(4)\./.test(VxeUI.uiVersion || VxeUI.tableVersion)) {
|
|
2681
|
-
console.error('[@vxe-ui/plugin-render-antd 4.
|
|
2779
|
+
console.error('[@vxe-ui/plugin-render-antd 4.4.1] Requires vxe-table 4.7.0+ version. https://vxeui.com/other4/#/plugin-render-antd/install');
|
|
2682
2780
|
}
|
|
2683
2781
|
}
|
|
2684
2782
|
/**
|
|
@@ -2718,7 +2816,7 @@
|
|
|
2718
2816
|
_store.globalConfig.Antd = window.antd;
|
|
2719
2817
|
}
|
|
2720
2818
|
}
|
|
2721
|
-
exports
|
|
2819
|
+
exports["default"] = VxeUIPluginRenderAntd;
|
|
2722
2820
|
} (lib));
|
|
2723
2821
|
return lib;
|
|
2724
2822
|
}
|