@vxe-ui/plugin-render-antd 4.3.1 → 4.4.0
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 +44 -13
- 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 +27 -4
- package/lib/index.common.js +3 -3
- package/lib/index.js +3 -3
- package/lib/index.umd.js +44 -13
- package/lib/index.umd.min.js +1 -1
- package/lib/table/index.js +36 -5
- package/package.json +77 -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 +568 -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,7 +213,7 @@
|
|
|
213
213
|
return getCellLabelVNs(renderOpts, params, cellValue);
|
|
214
214
|
};
|
|
215
215
|
}
|
|
216
|
-
function
|
|
216
|
+
function handleSelectCellValue(cellValue, renderOpts) {
|
|
217
217
|
var _renderOpts$options = renderOpts.options,
|
|
218
218
|
options = _renderOpts$options === void 0 ? [] : _renderOpts$options,
|
|
219
219
|
optionGroups = renderOpts.optionGroups,
|
|
@@ -223,12 +223,9 @@
|
|
|
223
223
|
optionProps = _renderOpts$optionPro === void 0 ? {} : _renderOpts$optionPro,
|
|
224
224
|
_renderOpts$optionGro = renderOpts.optionGroupProps,
|
|
225
225
|
optionGroupProps = _renderOpts$optionGro === void 0 ? {} : _renderOpts$optionGro;
|
|
226
|
-
var row = params.row,
|
|
227
|
-
column = params.column;
|
|
228
226
|
var labelProp = optionProps.label || 'label';
|
|
229
227
|
var valueProp = optionProps.value || 'value';
|
|
230
228
|
var groupOptions = optionGroupProps.options || 'options';
|
|
231
|
-
var cellValue = _xeUtils["default"].get(row, column.field);
|
|
232
229
|
if (!isEmptyValue(cellValue)) {
|
|
233
230
|
return _xeUtils["default"].map(props.mode === 'multiple' ? cellValue : [cellValue], optionGroups ? function (value) {
|
|
234
231
|
var selectItem;
|
|
@@ -250,6 +247,12 @@
|
|
|
250
247
|
}
|
|
251
248
|
return '';
|
|
252
249
|
}
|
|
250
|
+
function getSelectCellValue(renderOpts, params) {
|
|
251
|
+
var row = params.row,
|
|
252
|
+
column = params.column;
|
|
253
|
+
var cellValue = _xeUtils["default"].get(row, column.field);
|
|
254
|
+
return handleSelectCellValue(cellValue, renderOpts);
|
|
255
|
+
}
|
|
253
256
|
function getCascaderCellValue(renderOpts, params) {
|
|
254
257
|
var _renderOpts$props3 = renderOpts.props,
|
|
255
258
|
props = _renderOpts$props3 === void 0 ? {} : _renderOpts$props3;
|
|
@@ -456,7 +459,35 @@
|
|
|
456
459
|
}, ons))];
|
|
457
460
|
},
|
|
458
461
|
renderTableCell: function renderTableCell(renderOpts, params) {
|
|
459
|
-
|
|
462
|
+
var options = renderOpts.options,
|
|
463
|
+
optionGroups = renderOpts.optionGroups;
|
|
464
|
+
var $table = params.$table,
|
|
465
|
+
row = params.row,
|
|
466
|
+
column = params.column;
|
|
467
|
+
var opSize = options ? options.length : null;
|
|
468
|
+
var ogSize = optionGroups ? optionGroups.length : null;
|
|
469
|
+
if ($table.effectCellData) {
|
|
470
|
+
var _$table$effectCellDat = $table.effectCellData(row, column, {
|
|
471
|
+
key: 'render_table_cell',
|
|
472
|
+
isChanged: function isChanged(_ref) {
|
|
473
|
+
var oldValue = _ref.oldValue,
|
|
474
|
+
cellValue = _ref.cellValue;
|
|
475
|
+
return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
|
|
476
|
+
},
|
|
477
|
+
setValue: function setValue(_ref2) {
|
|
478
|
+
var cellValue = _ref2.cellValue;
|
|
479
|
+
return [cellValue, opSize, ogSize];
|
|
480
|
+
},
|
|
481
|
+
getResult: function getResult(_ref3) {
|
|
482
|
+
var cellValue = _ref3.cellValue;
|
|
483
|
+
return handleSelectCellValue(cellValue, renderOpts);
|
|
484
|
+
}
|
|
485
|
+
}),
|
|
486
|
+
_cellResult = _$table$effectCellDat.cellResult;
|
|
487
|
+
return getCellLabelVNs(renderOpts, params, _cellResult);
|
|
488
|
+
}
|
|
489
|
+
var cellResult = getSelectCellValue(renderOpts, params);
|
|
490
|
+
return getCellLabelVNs(renderOpts, params, cellResult);
|
|
460
491
|
},
|
|
461
492
|
renderTableFilter: function renderTableFilter(renderOpts, params) {
|
|
462
493
|
var _renderOpts$options2 = renderOpts.options,
|
|
@@ -2605,12 +2636,12 @@
|
|
|
2605
2636
|
function requireLib () {
|
|
2606
2637
|
if (hasRequiredLib) return lib;
|
|
2607
2638
|
hasRequiredLib = 1;
|
|
2608
|
-
(function (exports
|
|
2639
|
+
(function (exports) {
|
|
2609
2640
|
|
|
2610
|
-
Object.defineProperty(exports
|
|
2641
|
+
Object.defineProperty(exports, "__esModule", {
|
|
2611
2642
|
value: true
|
|
2612
2643
|
});
|
|
2613
|
-
exports
|
|
2644
|
+
exports["default"] = exports.VxeUIPluginRenderAntd = void 0;
|
|
2614
2645
|
var _table = requireTable();
|
|
2615
2646
|
var _form = requireForm();
|
|
2616
2647
|
var _formDesign = requireFormDesign();
|
|
@@ -2653,7 +2684,7 @@
|
|
|
2653
2684
|
}
|
|
2654
2685
|
return name;
|
|
2655
2686
|
}
|
|
2656
|
-
var VxeUIPluginRenderAntd = exports
|
|
2687
|
+
var VxeUIPluginRenderAntd = exports.VxeUIPluginRenderAntd = {
|
|
2657
2688
|
component: function component(comp) {
|
|
2658
2689
|
if (comp && comp.name) {
|
|
2659
2690
|
var kcName = _xeUtils["default"].kebabCase(comp.name);
|
|
@@ -2661,7 +2692,7 @@
|
|
|
2661
2692
|
_store.componentMaps[kcName] = comp;
|
|
2662
2693
|
_store.componentMaps[ccName] = comp;
|
|
2663
2694
|
} else {
|
|
2664
|
-
console.error('[@vxe-ui/plugin-render-antd 4.
|
|
2695
|
+
console.error('[@vxe-ui/plugin-render-antd 4.4.0] error component.', comp);
|
|
2665
2696
|
}
|
|
2666
2697
|
},
|
|
2667
2698
|
install: function install(VxeUI, options) {
|
|
@@ -2674,11 +2705,11 @@
|
|
|
2674
2705
|
var pVersion = 4;
|
|
2675
2706
|
var sVersion = 11;
|
|
2676
2707
|
if (!VxeUI.checkVersion(VxeUI.tableVersion, pVersion, sVersion)) {
|
|
2677
|
-
console.error("[@vxe-ui/plugin-render-antd 4.
|
|
2708
|
+
console.error("[@vxe-ui/plugin-render-antd 4.4.0] ".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
2709
|
}
|
|
2679
2710
|
} else {
|
|
2680
2711
|
if (!/^(4)\./.test(VxeUI.uiVersion || VxeUI.tableVersion)) {
|
|
2681
|
-
console.error('[@vxe-ui/plugin-render-antd 4.
|
|
2712
|
+
console.error('[@vxe-ui/plugin-render-antd 4.4.0] Requires vxe-table 4.7.0+ version. https://vxeui.com/other4/#/plugin-render-antd/install');
|
|
2682
2713
|
}
|
|
2683
2714
|
}
|
|
2684
2715
|
/**
|
|
@@ -2718,7 +2749,7 @@
|
|
|
2718
2749
|
_store.globalConfig.Antd = window.antd;
|
|
2719
2750
|
}
|
|
2720
2751
|
}
|
|
2721
|
-
exports
|
|
2752
|
+
exports["default"] = VxeUIPluginRenderAntd;
|
|
2722
2753
|
} (lib));
|
|
2723
2754
|
return lib;
|
|
2724
2755
|
}
|