ap-dev 1.2.10 → 1.2.12
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/dev/ApiPanel/modules/ApiGrid.vue +1423 -1388
- package/dev/DbDesignPanel/DevDbTable.vue +1 -1
- package/package.json +1 -1
|
@@ -1,226 +1,232 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
2
|
+
<div style="height: 100%">
|
|
3
|
+
<el-tabs v-model="activeName" class="api-grid">
|
|
4
|
+
<el-tab-pane label="表格属性" name="gridAttr" class="api-grid-tab">
|
|
5
|
+
<div class="flex flex-direction-column api-grid-tab-ctn">
|
|
6
|
+
<div class="api-grid-tab-ctn-header">
|
|
7
|
+
<el-radio-group v-model="gridAttrType">
|
|
8
|
+
<el-radio-button label="all">全部</el-radio-button>
|
|
9
|
+
<el-radio-button label="data">数据</el-radio-button>
|
|
10
|
+
<el-radio-button label="toolbar">工具栏</el-radio-button>
|
|
11
|
+
<el-radio-button label="common">通用</el-radio-button>
|
|
12
|
+
<el-radio-button label="col">列相关</el-radio-button>
|
|
13
|
+
<el-radio-button label="style">式样</el-radio-button>
|
|
14
|
+
<el-radio-button label="tree">树形结构</el-radio-button>
|
|
15
|
+
<el-radio-button label="other">不常用</el-radio-button>
|
|
16
|
+
</el-radio-group>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="flex-1 api-grid-tab-ctn-table">
|
|
19
|
+
<api-table
|
|
20
|
+
:data="gridAttrData"
|
|
21
|
+
:columns="gridAttrCols"
|
|
22
|
+
:span-method="gridSpanMethod"
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
27
|
+
<div>
|
|
28
|
+
<api-tittle2>注意事项：</api-tittle2>
|
|
29
|
+
1、表格属性类型是方法时，方法中的this说明：
|
|
30
|
+
<api-code>
|
|
31
|
+
示例：定义表格的对象：<br>
|
|
32
|
+
tableOpts:{<br>
|
|
33
|
+
...<br>
|
|
34
|
+
afterLoadData...<br>
|
|
35
|
+
}<br>
|
|
36
|
+
写法1：afterLoadData() {console.log(this)}<br>
|
|
37
|
+
写法2：等价于写法1 afterLoadData: function() {console.log(this)}<br>
|
|
38
|
+
写法3：afterLoadData:()=> {console.log(this)}<br>
|
|
39
|
+
写法4：afterLoadData: this.afterLoadDataFn<br>
|
|
40
|
+
methods: { afterLoadData() {console.log(this)},}<br>
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
42
|
+
</api-code>
|
|
43
|
+
写法1、2、3：this指向的是表格对象(即tableOpts对象)<br>
|
|
44
|
+
写法4：this指向的页面组件，此时方法中可以调用页面的data、methods等等。<br><br>
|
|
45
|
+
2、表格组件自定义封装组件。elementUI的表格属性配置无效。<br><br>
|
|
46
|
+
3、表格高度：表格高度默认填满容器(100%)，调整表格高度，需要调整外部容器。
|
|
47
|
+
</div>
|
|
48
|
+
</el-tab-pane>
|
|
49
|
+
<el-tab-pane label="事件/回调" name="event" class="api-grid-tab">
|
|
50
|
+
<div class="flex flex-direction-column api-grid-tab-ctn">
|
|
51
|
+
<div class="api-grid-tab-ctn-header">
|
|
52
|
+
<el-radio-group v-model="eventType">
|
|
53
|
+
<el-radio-button label="all">全部</el-radio-button>
|
|
54
|
+
<el-radio-button label="callback">回调</el-radio-button>
|
|
55
|
+
<el-radio-button label="event">事件</el-radio-button>
|
|
56
|
+
</el-radio-group>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="flex-1 api-grid-tab-ctn-table">
|
|
59
|
+
<api-table :data="eventData" :columns="eventCols" :span-method="gridSpanMethod" />
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</el-tab-pane>
|
|
63
|
+
<el-tab-pane label="列属性" name="colAttr" class="api-grid-tab">
|
|
64
|
+
<div class="flex flex-direction-column api-grid-tab-ctn">
|
|
65
|
+
<div class="api-grid-tab-ctn-header">
|
|
66
|
+
<el-radio-group v-model="colAttrType">
|
|
67
|
+
<el-radio-button label="all">全部</el-radio-button>
|
|
68
|
+
<el-radio-button label="base">通用</el-radio-button>
|
|
69
|
+
<el-radio-button label="input">input</el-radio-button>
|
|
70
|
+
<el-radio-button label="inputNumber">inputNumber</el-radio-button>
|
|
71
|
+
<el-radio-button label="slot">slot</el-radio-button>
|
|
72
|
+
<el-radio-button label="select">select</el-radio-button>
|
|
73
|
+
<el-radio-button label="cascader">cascader</el-radio-button>
|
|
74
|
+
<el-radio-button label="expand">expand</el-radio-button>
|
|
75
|
+
<el-radio-button label="search">search</el-radio-button>
|
|
76
|
+
<el-radio-button label="searchTable">searchTable</el-radio-button>
|
|
77
|
+
<el-radio-button label="searchTree">searchTree</el-radio-button>
|
|
78
|
+
<el-radio-button label="searchPicker">searchPicker</el-radio-button>
|
|
79
|
+
<el-radio-button label="datePicker">datePicker</el-radio-button>
|
|
80
|
+
</el-radio-group>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="flex-1 api-grid-tab-ctn-table">
|
|
83
|
+
<api-table :data="colAttrData" :columns="colAttrCols" :span-method="gridSpanMethod" />
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</el-tab-pane>
|
|
87
|
+
<el-tab-pane label="方法" name="method" class="api-grid-tab">
|
|
88
|
+
<div class="flex flex-direction-column api-grid-tab-ctn">
|
|
89
|
+
<div class="api-grid-tab-ctn-header">
|
|
90
|
+
<el-radio-group v-model="methodType">
|
|
91
|
+
<el-radio-button label="all">全部</el-radio-button>
|
|
92
|
+
<el-radio-button label="data">请求数据</el-radio-button>
|
|
93
|
+
<el-radio-button label="operate">操作</el-radio-button>
|
|
94
|
+
<el-radio-button label="toggle">触发事件</el-radio-button>
|
|
95
|
+
<el-radio-button label="other">其他</el-radio-button>
|
|
96
|
+
</el-radio-group>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="flex-1 api-grid-tab-ctn-table">
|
|
99
|
+
<api-table :data="methodData" :columns="methodCols" :span-method="gridSpanMethod" />
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</el-tab-pane>
|
|
103
|
+
</el-tabs>
|
|
104
|
+
</div>
|
|
105
105
|
</template>
|
|
106
106
|
|
|
107
107
|
<script>
|
|
108
108
|
import { ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2 } from './../components'
|
|
109
109
|
|
|
110
110
|
export default {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
111
|
+
name: 'ApiGrid',
|
|
112
|
+
components: {
|
|
113
|
+
ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
|
|
114
|
+
},
|
|
115
|
+
data() {
|
|
116
|
+
const gridAttrCols = [
|
|
117
|
+
{ label: '分类', prop: 'group', width: '80px' },
|
|
118
|
+
{ label: '名称', prop: 'name', width: '140px' },
|
|
119
|
+
{ label: '类型', prop: 'type', width: '100px' },
|
|
120
|
+
{ label: '默认值', prop: 'default', width: '80px' },
|
|
121
|
+
{ label: '描述', prop: 'memo', minWidth: '100px' },
|
|
122
|
+
{ label: '示例代码', prop: 'code', minWidth: '100px' }
|
|
123
|
+
]
|
|
124
|
+
const gridAttrData_data = [
|
|
125
|
+
{
|
|
126
|
+
group: '数据',
|
|
127
|
+
name: 'initData',
|
|
128
|
+
type: '布尔',
|
|
129
|
+
default: 'false',
|
|
130
|
+
memo: '初始化表格后，是否加载数据<br>注：local数据时，默认加载。',
|
|
131
|
+
code: '<span class="api-code">initData: true，// 加载数据</span>'
|
|
132
|
+
}, {
|
|
133
|
+
name: 'localData',
|
|
134
|
+
type: '数组',
|
|
135
|
+
default: '',
|
|
136
|
+
memo: '表格数据'
|
|
137
|
+
}, {
|
|
138
|
+
name: 'dataUrl',
|
|
139
|
+
type: '字符串',
|
|
140
|
+
default: '',
|
|
141
|
+
memo: `表格数据请求Url<br>
|
|
142
142
|
<span class="api-memo">注：1、存在dataUrl，则取后台数据，localData数据无效。<br>
|
|
143
143
|
2、如果后台没有分页，currentPage=0，list长度>0，则前端分页。<br>
|
|
144
144
|
3、建议后台分页，不要返回全部数据。除非频繁的排序、过滤等。</span>`
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
145
|
+
}, {
|
|
146
|
+
name: 'saveUrl',
|
|
147
|
+
type: '字符串',
|
|
148
|
+
default: '',
|
|
149
|
+
memo: `保存表格数据url<br><span class="api-memo">注：1、添加行：存在默认值时，必须手动设定默认值，数据库默认值无效。<br>
|
|
150
150
|
2、编辑行：有修改的列和editPk对应的列会传到后台，没有修改的数据不传。
|
|
151
151
|
</span>`
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
152
|
+
}, {
|
|
153
|
+
name: 'deleteUrl',
|
|
154
|
+
type: '字符串',
|
|
155
|
+
default: '',
|
|
156
|
+
memo: '删除表格数据url<br><span class="api-memo">注：删除时传到后台的数据：deletePk对应的列。</span>',
|
|
157
|
+
code: `<div class="api-code">1、前端请求路径：deleteUrl: "/apm/demo/deleteByIds"
|
|
158
158
|
2、后台接收：使用deleteList接收参数、使用GridUtil.getGridDeleteList处理参数
|
|
159
159
|
@RequestMapping(value = "/deleteByIds", method = RequestMethod.POST)
|
|
160
160
|
public String deleteByIds(String deleteList) {
|
|
161
161
|
List list = GridUtil.getGridDeleteFdIdList(deleteList, Demo.class);
|
|
162
162
|
return ResultUtil.success(count);
|
|
163
163
|
}</div>`
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
164
|
+
}, {
|
|
165
|
+
name: 'deleteRemote',
|
|
166
|
+
type: '布尔',
|
|
167
|
+
default: 'true',
|
|
168
|
+
memo: 'true: 点击表头【删除】按钮，后台马上删除数据<br>false：点击表头【删除】按钮，前端删除数据，点【保存】后后台删除数据。 -> 需要再后台添加 deleteList参数处理<br>适用场景：一个页面有多个表格，需要统一使用一个保存按钮。',
|
|
169
|
+
code: `<div class="api-code">deleteRemote:true</div>`
|
|
170
|
+
}, {
|
|
171
|
+
name: 'sortUrl',
|
|
172
|
+
type: '字符串',
|
|
173
|
+
default: '',
|
|
174
|
+
memo: '排序url<br><span class="api-memo">注：传到后台的数据：rowKey和sortey对应的列。</span>',
|
|
175
|
+
code: `<div class="api-code">1、前端请求路径：deleteUrl: "/apm/demo/updateXxSortList"
|
|
170
176
|
2、后台接收：sortList
|
|
171
177
|
@RequestMapping(value = "/updateXxSortList", method = RequestMethod.POST)
|
|
172
178
|
public String updateXxSortList(String sortList) {
|
|
173
179
|
int count = tXxUtil.updateSortList(sortList);
|
|
174
180
|
return ResultUtil.success(count);
|
|
175
181
|
}</div>`
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
182
|
+
}, {
|
|
183
|
+
name: 'method',
|
|
184
|
+
type: '字符串',
|
|
185
|
+
default: 'POST',
|
|
186
|
+
memo: '表格数据请求方式。<br>可选值："POST"、"GET"',
|
|
187
|
+
code: '<div class="api-code">method: "POST" //post请求<br>method: "GET" //get请求<br></div>'
|
|
188
|
+
}, {
|
|
189
|
+
name: 'params',
|
|
190
|
+
type: '对象/方法',
|
|
191
|
+
default: '',
|
|
192
|
+
memo: '数据请求和保存时的参数。<br><span class="api-memo">注：1、参数会变时需要使用方法，参数固定可直接定义对象<br>2、请求数据时参数自动添加分页、排序信息，保存时不添加。</span>',
|
|
193
|
+
code: `<div class="api-code">1、固定参数：定义对象
|
|
188
194
|
params: { type: 123}
|
|
189
195
|
2、动态参数：使用箭头函数
|
|
190
196
|
params: () => {
|
|
191
197
|
return { type: this.typeId}
|
|
192
198
|
}</div>`
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
199
|
+
}, {
|
|
200
|
+
name: 'editPk',
|
|
201
|
+
type: '字符串',
|
|
202
|
+
default: 'fdId',
|
|
203
|
+
memo: '编辑时，传递editPk的字段和有修改的字段到后台。多个字段使用","隔开。',
|
|
204
|
+
code: '<div class="api-code">editPk: "name,type", // 传递行的name、type到后台</div>'
|
|
205
|
+
}, {
|
|
206
|
+
name: 'deletePk',
|
|
207
|
+
type: '字符串',
|
|
208
|
+
default: 'fdId',
|
|
209
|
+
memo: '删除时，传递deletePk的字段到后台。多个字段使用","隔开。',
|
|
210
|
+
code: '<div class="api-code">deletePk: "name,type", // 传递行的name、type到后台</div>'
|
|
211
|
+
}, {
|
|
212
|
+
name: 'rowKey',
|
|
213
|
+
type: '字符串',
|
|
214
|
+
default: 'fdId',
|
|
215
|
+
memo: '行数据的 Key，对应列的prop。<br><span class="api-memo">注意：当树形结构、调用rowKey的相关方法时，需要按实际设定rowKey值。</span>'
|
|
216
|
+
}, {
|
|
217
|
+
name: 'sortKey',
|
|
218
|
+
type: '字符串',
|
|
219
|
+
default: 'fdSort',
|
|
220
|
+
memo: '排序的 Key，对应列的prop。<br><span class="api-memo">注：工具类排序按钮时使用。</span>'
|
|
221
|
+
}
|
|
222
|
+
]
|
|
223
|
+
const gridAttrData_toolbar = [
|
|
224
|
+
{
|
|
225
|
+
group: '工具栏',
|
|
226
|
+
name: 'toolbarBtn',
|
|
227
|
+
type: '数组',
|
|
228
|
+
default: '',
|
|
229
|
+
memo: `数组的每一项可以是字符串或者对象<br>
|
|
224
230
|
一、字符串:可选值【add、edit、cancel、save、del、refresh、sortAuto、sortDown、sortUp、separator】<br>
|
|
225
231
|
注：separator表示按钮分组<br>
|
|
226
232
|
二、对象：{ type: "",btnType:"",text: "",icon: "",onClick:()=>{}}<br>
|
|
@@ -229,108 +235,114 @@ btnType: 按钮类型。可选值【空、primary 、success、warning、danger
|
|
|
229
235
|
text: 按钮上的文字<br>
|
|
230
236
|
icon: 按钮的icon<br>
|
|
231
237
|
onClick: 自定义事件，优先级大于type`,
|
|
232
|
-
|
|
238
|
+
code: `<div class="api-code">// 1、直接使用默认按钮 2、自定义了删除按钮的式样 3、自定义操作按钮
|
|
233
239
|
toolbarBtn: ["add", "edit", "del", "cancel", "refresh", "save", "separator",
|
|
234
240
|
{type: "del", text: "删除内容"},
|
|
235
241
|
{btnType: "primary", text: "自定义", icon: "el-icon-top", onClick: () => {}}]</div>`
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
242
|
+
}
|
|
243
|
+
]
|
|
244
|
+
const gridAttrData_common = [
|
|
245
|
+
{
|
|
246
|
+
group: '通用',
|
|
247
|
+
name: 'columns',
|
|
248
|
+
type: '数组',
|
|
249
|
+
default: '',
|
|
250
|
+
memo: '参考【列属性】标签页'
|
|
251
|
+
}, {
|
|
252
|
+
name: 'fit',
|
|
253
|
+
type: '布尔',
|
|
254
|
+
default: 'true',
|
|
255
|
+
memo: '列的宽度是否自动撑开。true自动撑开，false固定宽度。',
|
|
256
|
+
code: '<span class="api-code">fit: false，// 列固定宽度</span>'
|
|
257
|
+
}, {
|
|
258
|
+
name: 'multiSelect',
|
|
259
|
+
type: '布尔',
|
|
260
|
+
default: 'true',
|
|
261
|
+
memo: '是否多选。true多选，false单选。',
|
|
262
|
+
code: '<span class="api-code">multiSelect: false，// 单选</span>'
|
|
263
|
+
}, {
|
|
264
|
+
name: 'pagination',
|
|
265
|
+
type: '对象',
|
|
266
|
+
default: '见描述',
|
|
267
|
+
memo: `分页信息：<br>
|
|
262
268
|
默认值：{currentPage:1,pageSizes:[30,60,90],pageSize:30,layout:"total, sizes, prev, pager, next, jumper"}<br>
|
|
263
269
|
currentPage:数字，当前页<br>
|
|
264
270
|
pageSizes:数组，每页条数下拉选择<br>
|
|
265
271
|
pageSize:数字，每页条数。通常等于pageSizes的第一项<br>
|
|
266
272
|
layout:字符串，分页布局。逗号拼接，可调整顺序，可选值参考默认值内容。<br>`,
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
273
|
+
code: '<span class="api-code">// 每页可选为100、200、300<br>pagination: {pageSizes: [100, 200, 300],pageSize: 100}</span>'
|
|
274
|
+
}, {
|
|
275
|
+
name: 'showPagination',
|
|
276
|
+
type: '布尔',
|
|
277
|
+
default: 'true',
|
|
278
|
+
memo: `是否显示分页<br>注: 不显示分页时，pageSize自动设为0，后台分页工具类不会进行分页处理。`,
|
|
279
|
+
code: '<span class="api-code">showPagination: false,</span>'
|
|
280
|
+
}, {
|
|
281
|
+
name: 'addDefaultObj',
|
|
282
|
+
type: '对象/方法',
|
|
283
|
+
default: '无',
|
|
284
|
+
memo: '添加行时对象的默认值。<br>一对象：默认值。<br>二、方法：()方法返回默认值<br><span class="api-memo">注：和列的addDefaultValue效果相同，主要处理页面不需要显示的字段的默认值。</span>',
|
|
285
|
+
code: '<span class="api-code">// 1、对象形式：添加行的fdDeleted默认为0 <br>addDefaultObj: {fdDeleted:0}' +
|
|
274
286
|
'<br>// 2、方法形式：动态返回添加行的默认值 <br>addDefaultObj: () => { return {fdDeleted:0} }</span>'
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
287
|
+
}
|
|
288
|
+
]
|
|
289
|
+
const gridAttrData_col = [
|
|
290
|
+
{
|
|
291
|
+
group: '列相关',
|
|
292
|
+
name: 'showSelection',
|
|
293
|
+
type: '布尔',
|
|
294
|
+
default: 'true',
|
|
295
|
+
memo: '显示左侧选择列。true显示，false不显示。',
|
|
296
|
+
code: '<span class="api-code">showSelection: false，// 不显示选择列</span>'
|
|
297
|
+
}, {
|
|
298
|
+
name: 'reserveSelection',
|
|
299
|
+
type: '布尔',
|
|
300
|
+
default: 'true',
|
|
301
|
+
memo: '重新加载数据后，保留选中行。如：刷新时。<br><span class="api-memo">注：必须定义正确的rowKey</span>',
|
|
302
|
+
code: '<span class="api-code">reserveSelection: false，// 不保留选中行</span>'
|
|
303
|
+
}, {
|
|
304
|
+
name: 'showIndex',
|
|
305
|
+
type: '布尔',
|
|
306
|
+
default: 'true',
|
|
307
|
+
memo: '显示编号列。true显示，false不显示。<br><span class="api-memo">注：自动生成编号dataIdx</span>',
|
|
308
|
+
code: '<span class="api-code">showIndex: false，// 不显示编号</span>'
|
|
309
|
+
}, {
|
|
310
|
+
name: 'indexWidth',
|
|
311
|
+
type: '数字',
|
|
312
|
+
default: '40',
|
|
313
|
+
memo: '编号列的宽度<br><span class="api-memo">注：树形结构通常需要使用到该属性</span>',
|
|
314
|
+
code: '<span class="api-code">indexWidth: 50，// 编号列自定义宽度</span>'
|
|
315
|
+
}, {
|
|
316
|
+
name: 'indexAlign',
|
|
317
|
+
type: '字符串',
|
|
318
|
+
default: 'center',
|
|
319
|
+
memo: '编号列对齐方式。可选值【left、center、right】',
|
|
320
|
+
code: '<span class="api-code">indexAlign: "left"，// 编号列做对齐</span>'
|
|
321
|
+
}
|
|
322
|
+
]
|
|
323
|
+
const gridAttrData_style = [
|
|
324
|
+
{
|
|
325
|
+
group: '式样',
|
|
326
|
+
name: 'rowStyle',
|
|
327
|
+
type: '方法/对象',
|
|
328
|
+
default: '',
|
|
329
|
+
memo: '1、对象：为所有行固定的style<br>' +
|
|
318
330
|
'2、方法：返回行的style的回调方法。Function({row, rowIndex})<br>',
|
|
319
|
-
|
|
331
|
+
code: `<div class="api-code">// 奇数行、偶数行的背景色不同
|
|
320
332
|
rowStyle: (param) => {
|
|
321
333
|
if (param.rowIndex % 2 == 0) {
|
|
322
334
|
return {backgroundColor: '#3A71A8';}
|
|
323
335
|
} else {
|
|
324
336
|
return {backgroundColor: '#3a835d';}
|
|
325
337
|
}},</div>`
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
338
|
+
}, {
|
|
339
|
+
name: 'rowClassName',
|
|
340
|
+
type: '方法/字符串',
|
|
341
|
+
default: '',
|
|
342
|
+
memo: '1、字符串：为所有行固定的className<br>' +
|
|
331
343
|
'2、方法：返回行的className的回调方法。Function({row, rowIndex})<br>' +
|
|
332
344
|
'<span class="api-memo">注：必须是全局的class，注意全局变量的污染。</span>',
|
|
333
|
-
|
|
345
|
+
code: `<div class="api-code">// 奇数行、偶数行的背景色不同
|
|
334
346
|
rowClassName: (param) => {
|
|
335
347
|
if (param.rowIndex % 2 == 0) {
|
|
336
348
|
return "table-row-bg1"
|
|
@@ -341,13 +353,13 @@ rowClassName: (param) => {
|
|
|
341
353
|
<style>
|
|
342
354
|
.el-table .table-row-bg1 {background-color: white;}
|
|
343
355
|
</style></div>`
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
356
|
+
}, {
|
|
357
|
+
name: 'cellStyle',
|
|
358
|
+
type: '方法/对象',
|
|
359
|
+
default: '',
|
|
360
|
+
memo: '1、对象：为所有单元格固定的style<br>' +
|
|
349
361
|
'2、方法：返回单元格的style的回调方法。Function({row, rowIndex})<br>',
|
|
350
|
-
|
|
362
|
+
code: `<div class="api-code">// 名称列，名字为张三的定义背景色
|
|
351
363
|
cellStyle: (param) => {
|
|
352
364
|
if (param.column.property == 'name' && param.row.name == "张三") {
|
|
353
365
|
return {
|
|
@@ -355,14 +367,14 @@ cellStyle: (param) => {
|
|
|
355
367
|
}
|
|
356
368
|
}}
|
|
357
369
|
</div>`
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
370
|
+
}, {
|
|
371
|
+
name: 'cellClassName',
|
|
372
|
+
type: '方法/字符串',
|
|
373
|
+
default: '',
|
|
374
|
+
memo: '1、字符串：为单元格固定的className<br>' +
|
|
363
375
|
'2、方法：返回单元格的className的回调方法。Function({row, column, rowIndex, columnIndex})<br>' +
|
|
364
376
|
'<span class="api-memo">注：必须是全局的class，注意全局变量的污染。</span>',
|
|
365
|
-
|
|
377
|
+
code: `<div class="api-code"> // 1、定义cell的class
|
|
366
378
|
cellClassName: (param) => {
|
|
367
379
|
return 'cell-test'
|
|
368
380
|
}
|
|
@@ -371,390 +383,390 @@ cellClassName: (param) => {
|
|
|
371
383
|
.el-table .cell-test {background-color: white;}
|
|
372
384
|
</style>
|
|
373
385
|
</div>`
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
386
|
+
}, {
|
|
387
|
+
name: 'border',
|
|
388
|
+
type: '布尔',
|
|
389
|
+
default: 'true',
|
|
390
|
+
memo: '显示表格边框。true显示，false不显示<br>' +
|
|
379
391
|
'<span class="api-memo"></span>',
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
392
|
+
code: `<div class="api-code"></div>`
|
|
393
|
+
}, {
|
|
394
|
+
name: 'stripe',
|
|
395
|
+
type: '布尔',
|
|
396
|
+
default: 'false',
|
|
397
|
+
memo: '带斑马纹的表格。true显示，false不显示<br>' +
|
|
386
398
|
'<span class="api-memo"></span>',
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
399
|
+
code: `<div class="api-code"></div>`
|
|
400
|
+
}, {
|
|
401
|
+
name: 'highlightCurrentRow',
|
|
402
|
+
type: '布尔',
|
|
403
|
+
default: 'true',
|
|
404
|
+
memo: '高亮当前click的行。true高亮背景，false不高亮。<br>' +
|
|
393
405
|
'<span class="api-memo"></span>',
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
406
|
+
code: `<div class="api-code"></div>`
|
|
407
|
+
}
|
|
408
|
+
]
|
|
409
|
+
const gridAttrData_tree = [
|
|
410
|
+
{
|
|
411
|
+
group: '树形结构',
|
|
412
|
+
name: 'rowParentKey',
|
|
413
|
+
type: '字符串',
|
|
414
|
+
default: '',
|
|
415
|
+
memo: '行数据对应父节点Key。存在rowParentKey则为树形结构。<br>树形结构时：rowParentKey、rowKey两个必填。',
|
|
416
|
+
code: `<div class="api-code">rowParentKey: "parentId" // 父节点id</div>`
|
|
417
|
+
}, {
|
|
418
|
+
name: 'defaultExpandAll',
|
|
419
|
+
type: '布尔',
|
|
420
|
+
default: 'false',
|
|
421
|
+
memo: '是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效',
|
|
422
|
+
code: `<div class="api-code">defaultExpandAll: true,// 默认展开行</div>`
|
|
423
|
+
}, {
|
|
424
|
+
name: 'rowChildren',
|
|
425
|
+
type: '字符串',
|
|
426
|
+
default: 'apTableChildren',
|
|
427
|
+
memo: '默认子节点数组。通常不用配置。',
|
|
428
|
+
code: `<div class="api-code"></div>`
|
|
429
|
+
}
|
|
430
|
+
]
|
|
431
|
+
const gridAttrData_other = [
|
|
432
|
+
{
|
|
433
|
+
group: '不常用',
|
|
434
|
+
name: 'spanMethod',
|
|
435
|
+
type: '方法',
|
|
436
|
+
default: '',
|
|
437
|
+
memo: '合并行或列，function(param)。返回 对象{rowspan: 2,colspan: 1}。',
|
|
438
|
+
code: `<div class="api-code"></div>`
|
|
439
|
+
}, {
|
|
440
|
+
name: 'showSummary',
|
|
441
|
+
type: '布尔',
|
|
442
|
+
default: 'false',
|
|
443
|
+
memo: '是否在表尾显示合计行',
|
|
444
|
+
code: `<div class="api-code"></div>`
|
|
445
|
+
}, {
|
|
446
|
+
name: 'summaryMethod',
|
|
447
|
+
type: '方法',
|
|
448
|
+
default: 'false',
|
|
449
|
+
memo: '自定义的合计计算方法，function(param)。返回数组，这个数组中的各项就会显示在合计行的各列中。<br><span class="api-memo">注：合计行不能跨列</span>',
|
|
450
|
+
code: `<div class="api-code"></div>`
|
|
451
|
+
}
|
|
452
|
+
]
|
|
453
|
+
const gridAttrData_all = gridAttrData_data
|
|
454
|
+
.concat(gridAttrData_toolbar)
|
|
455
|
+
.concat(gridAttrData_common)
|
|
456
|
+
.concat(gridAttrData_col)
|
|
457
|
+
.concat(gridAttrData_style)
|
|
458
|
+
.concat(gridAttrData_tree)
|
|
459
|
+
.concat(gridAttrData_other)
|
|
448
460
|
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
461
|
+
const eventCols = gridAttrCols
|
|
462
|
+
const eventData_callback = [
|
|
463
|
+
{
|
|
464
|
+
group: '回调',
|
|
465
|
+
name: 'beforeLoadData',
|
|
466
|
+
type: '方法',
|
|
467
|
+
default: '',
|
|
468
|
+
memo: '数据加载前：参数opts：表格参数',
|
|
469
|
+
code: `<span class="api-code"></span>`
|
|
470
|
+
}, {
|
|
471
|
+
name: 'afterLoadData',
|
|
472
|
+
type: '方法',
|
|
473
|
+
default: '',
|
|
474
|
+
memo: '数据加载完成：参数opts：表格参数<br><span class="api-memo">注：此时dom更新可能未完成，如果需要dom更新完成，使用afterAll回调。</span>',
|
|
475
|
+
code: `<span class="api-code"></span>`
|
|
476
|
+
}, {
|
|
477
|
+
name: 'afterAll',
|
|
478
|
+
type: '方法',
|
|
479
|
+
default: '',
|
|
480
|
+
memo: '数据加载完成，且dom更新完成。参数opts：表格参数',
|
|
481
|
+
code: `<span class="api-code"></span>`
|
|
482
|
+
}, {
|
|
483
|
+
name: 'beforeAdd',
|
|
484
|
+
type: '方法',
|
|
485
|
+
default: '',
|
|
486
|
+
memo: '数据添加前：参数opts：表格参数。返回false取消添加。',
|
|
487
|
+
code: `<span class="api-code">beforeAdd:(opts)=>{ return false;}</span>`
|
|
488
|
+
}, {
|
|
489
|
+
name: 'beforeEdit',
|
|
490
|
+
type: '方法',
|
|
491
|
+
default: '',
|
|
492
|
+
memo: '数据编辑前：参数opts：表格参数, selectRows：选择编辑的行。返回false取消编辑。',
|
|
493
|
+
code: `<span class="api-code">beforeEdit:(opts, selectRows)=>{ return false;}</span>`
|
|
494
|
+
}, {
|
|
495
|
+
name: 'beforeSave',
|
|
496
|
+
type: '方法',
|
|
497
|
+
default: '',
|
|
498
|
+
memo: '数据保存前：参数opts：表格参数。返回false取消保存。',
|
|
499
|
+
code: `<span class="api-code"></span>`
|
|
500
|
+
}, {
|
|
501
|
+
name: 'afterSave',
|
|
502
|
+
type: '方法',
|
|
503
|
+
default: '',
|
|
504
|
+
memo: '数据保存后：参数opts：表格参数, response:后台返回值',
|
|
505
|
+
code: `<span class="api-code"></span>`
|
|
506
|
+
}, {
|
|
507
|
+
name: 'beforeDelete',
|
|
508
|
+
type: '方法',
|
|
509
|
+
default: '',
|
|
510
|
+
memo: '数据删除前：参数opts：表格参数, selectRows：选择删除的行包括新添加得数据。返回false取消保存。',
|
|
511
|
+
code: `<span class="api-code"></span>`
|
|
512
|
+
}, {
|
|
513
|
+
name: 'afterDelete',
|
|
514
|
+
type: '方法',
|
|
515
|
+
default: '',
|
|
516
|
+
memo: '数据删除后：参数opts：表格参数, response:后台返回值',
|
|
517
|
+
code: `<span class="api-code"></span>`
|
|
518
|
+
}, {
|
|
519
|
+
name: 'refreshAfterSave',
|
|
520
|
+
type: '布尔',
|
|
521
|
+
default: 'true',
|
|
522
|
+
memo: '保存成功后是否刷新：true刷新、false不刷新',
|
|
523
|
+
code: `<span class="api-code"></span>`
|
|
524
|
+
}, {
|
|
525
|
+
name: 'refreshAfterDelete',
|
|
526
|
+
type: '布尔',
|
|
527
|
+
default: 'false',
|
|
528
|
+
memo: '删除成功后是否刷新：true刷新、false不刷新',
|
|
529
|
+
code: `<span class="api-code"></span>`
|
|
530
|
+
}]
|
|
531
|
+
const eventData_event = [
|
|
532
|
+
{
|
|
533
|
+
group: '事件',
|
|
534
|
+
name: 'selectionChangeEvent',
|
|
535
|
+
type: '方法',
|
|
536
|
+
default: '',
|
|
537
|
+
memo: '选中行发生变化时触发。参数：selection，选中行数组',
|
|
538
|
+
code: `<span class="api-code">selectionChangeEvent: (selection) => {console.log(selection);}</span>`
|
|
539
|
+
}, {
|
|
540
|
+
name: 'rowClickEvent',
|
|
541
|
+
type: '方法',
|
|
542
|
+
default: '',
|
|
543
|
+
memo: '行单击事件，参数：row, column, event',
|
|
544
|
+
code: `<span class="api-code"></span>`
|
|
545
|
+
}, {
|
|
546
|
+
name: 'rowDblClickEvent',
|
|
547
|
+
type: '方法',
|
|
548
|
+
default: '',
|
|
549
|
+
memo: '行双击事件，参数：row, column, event',
|
|
550
|
+
code: `<span class="api-code"></span>`
|
|
551
|
+
}, {
|
|
552
|
+
name: 'cellClickEvent',
|
|
553
|
+
type: '方法',
|
|
554
|
+
default: '',
|
|
555
|
+
memo: '单元格单击事件，参数：row, column, cell, event',
|
|
556
|
+
code: `<span class="api-code"></span>`
|
|
557
|
+
}, {
|
|
558
|
+
name: 'cellDblClickEvent',
|
|
559
|
+
type: '方法',
|
|
560
|
+
default: '',
|
|
561
|
+
memo: '单元格双击事件，参数：row, column, cell, event',
|
|
562
|
+
code: `<span class="api-code"></span>`
|
|
563
|
+
}]
|
|
564
|
+
const eventData_all = eventData_callback
|
|
565
|
+
.concat(eventData_event)
|
|
554
566
|
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
567
|
+
const colAttrCols = [
|
|
568
|
+
{ label: '分类', prop: 'group', width: '120px' },
|
|
569
|
+
{ label: '名称', prop: 'name', width: '170px' },
|
|
570
|
+
{ label: '类型', prop: 'type', width: '100px' },
|
|
571
|
+
{ label: '默认值', prop: 'default', width: '80px' },
|
|
572
|
+
{ label: '描述', prop: 'memo', minWidth: '100px' },
|
|
573
|
+
{ label: '示例代码', prop: 'code', minWidth: '100px' }
|
|
574
|
+
]
|
|
575
|
+
const colAttrData_base = [
|
|
576
|
+
{
|
|
577
|
+
group: '通用：常规',
|
|
578
|
+
name: 'label',
|
|
579
|
+
type: '字符串',
|
|
580
|
+
default: '',
|
|
581
|
+
memo: '显示的标题',
|
|
582
|
+
code: '<span class="api-code">label: "名称"，</span>'
|
|
583
|
+
},{
|
|
584
|
+
name: 'help',
|
|
585
|
+
type: '字符串',
|
|
586
|
+
default: '',
|
|
587
|
+
memo: '提示信息',
|
|
588
|
+
code: `<span class="api-code">help: "这是提示信息" <br> help: "<div style='color:red'>这是标题提示</div>", </span>`
|
|
589
|
+
}, {
|
|
590
|
+
name: 'prop',
|
|
591
|
+
type: '字符串',
|
|
592
|
+
default: '',
|
|
593
|
+
memo: '对应列内容的字段名<br><span class="api-memo">注：不能包含框架使用属性：isAdd、isEdit、changeArr、dataIdx、hasError。</span>',
|
|
594
|
+
code: '<span class="api-code">prop: "name"，</span>'
|
|
595
|
+
}, {
|
|
596
|
+
name: 'type',
|
|
597
|
+
type: '字符串',
|
|
598
|
+
default: '',
|
|
599
|
+
memo: '列类型，参见【type说明】'
|
|
600
|
+
}, {
|
|
601
|
+
name: 'rules',
|
|
602
|
+
type: '数组',
|
|
603
|
+
default: '',
|
|
604
|
+
memo: '校验规则<br><span class="api-memo">注：通用参考【element的表单校验】</span>',
|
|
605
|
+
code: `<div class="api-code">// 名称必填，长度限制
|
|
594
606
|
rules: [ {required: true, message: "请输入名称", trigger: "blur"},
|
|
595
607
|
{min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur"} ]</div>`
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
608
|
+
}, {
|
|
609
|
+
name: 'addDefaultValue',
|
|
610
|
+
type: '字符串、数字/方法',
|
|
611
|
+
default: '',
|
|
612
|
+
memo: '添加数据时默认值设定<br>一、字符串、数字：默认值。<br>二、方法：()方法返回默认值',
|
|
613
|
+
code: `<div class="api-code">1、字符串、数字：设定添加行默认值
|
|
602
614
|
addDefaultValue: 1,
|
|
603
615
|
addDefaultValue: "默认名字",
|
|
604
616
|
2、方法：动态返回默认值
|
|
605
617
|
addDefaultValue: () => {return "value";}</div>`
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
618
|
+
}, {
|
|
619
|
+
name: 'children',
|
|
620
|
+
type: '数组',
|
|
621
|
+
default: '',
|
|
622
|
+
memo: '多级表头。子元素同columns。<br><span class="api-memo">注：目前只支持二级表头，第一层表头只有label属性可用。</span>',
|
|
623
|
+
code: `<span class="api-code"> // 多级表头
|
|
612
624
|
{ label: "时间日期",
|
|
613
625
|
children: [{prop: "time",label: "时间",type: "input"},{prop: "date",label: "日期",type: "input"}]}</span>`
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
626
|
+
}, {
|
|
627
|
+
name: 'add',
|
|
628
|
+
type: '布尔/方法',
|
|
629
|
+
default: 'true',
|
|
630
|
+
memo: '允许该列添加数据<br>一、布尔：true允许添加，false不允许添加。<br>二、方法：()方法返回布尔值。返回true允许添加，false不允许添加。',
|
|
631
|
+
code: `<div class="api-code">1、布尔值：不允许添加
|
|
620
632
|
add: false,
|
|
621
633
|
2、方法：动态判断是否可以添加
|
|
622
634
|
add: () => {return true;}</div>`
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
635
|
+
}, {
|
|
636
|
+
name: 'edit',
|
|
637
|
+
type: '布尔/方法',
|
|
638
|
+
default: 'true',
|
|
639
|
+
memo: '允许该列编辑数据<br>一、布尔：true允许编辑，false不允许编辑。<br>二、方法：参数：(row) row:行数据<br>方法返回布尔值。返回true允许编辑，false不允许编辑。',
|
|
640
|
+
code: `<div class="api-code">1、布尔值：不允许编辑
|
|
629
641
|
edit: false,
|
|
630
642
|
2、方法：动态判断是否可以编辑
|
|
631
643
|
edit: (rowData) => {return true;}</div>`
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
644
|
+
}, {
|
|
645
|
+
name: 'hide',
|
|
646
|
+
type: '布尔',
|
|
647
|
+
default: 'false',
|
|
648
|
+
memo: '隐藏列<br>true隐藏，false显示',
|
|
649
|
+
code: '<span class="api-code">// 隐藏列<br> hide:true</span>'
|
|
650
|
+
}, {
|
|
651
|
+
name: 'sortable',
|
|
652
|
+
type: '布尔/字符串',
|
|
653
|
+
default: 'false',
|
|
654
|
+
memo: '是否可以排序。true可排序，false不可排序，local前端排序。<br><span class="api-memo">注1：不支持多列同时排序<br>注2：local时为前端排序，不会请求后台数据</span>',
|
|
655
|
+
code: `<span class="api-code">sortable: true,// 支持排序</span>`
|
|
656
|
+
}, {
|
|
657
|
+
group: '通用：式样',
|
|
658
|
+
name: 'width',
|
|
659
|
+
type: '字符串',
|
|
660
|
+
default: '80',
|
|
661
|
+
memo: '列的宽度(固定)。格式："数字"或"数字px"<br><span class="api-memo">注：1、表格fit为true时,未定义宽度的列会均分剩余空间。页面宽度不足时，出现滚动条。<br>2、推荐直接使用minWidth。</span>',
|
|
662
|
+
code: '<span class="api-code">width:"100px"<br> width:"100"</span>'
|
|
663
|
+
}, {
|
|
664
|
+
name: 'minWidth',
|
|
665
|
+
type: '字符串',
|
|
666
|
+
default: '80',
|
|
667
|
+
memo: '列的最小宽度。格式："数字"或"数字px"<br><span class="api-memo">注：minWidth会把剩余宽度按比例分配给设置了 min-width 的列。</span>',
|
|
668
|
+
code: '<span class="api-code">minWidth:"100px"<br> minWidth:"100"</span>'
|
|
669
|
+
}, {
|
|
670
|
+
name: 'align',
|
|
671
|
+
type: '字符串',
|
|
672
|
+
default: 'left',
|
|
673
|
+
memo: '列对齐方式：left、center、right',
|
|
674
|
+
code: '<span class="api-code">align:"center" // 居中对齐</span>'
|
|
675
|
+
}, {
|
|
676
|
+
name: 'headerAlign',
|
|
677
|
+
type: '字符串',
|
|
678
|
+
default: 'center',
|
|
679
|
+
memo: '表头对齐方式：left、center、right',
|
|
680
|
+
code: `<span class="api-code">headerAlign: "left",// 表头左对齐</span>`
|
|
681
|
+
}, {
|
|
682
|
+
name: 'fixed',
|
|
683
|
+
type: '字符串/布尔',
|
|
684
|
+
default: 'false',
|
|
685
|
+
memo: '列是否固定在左侧或者右侧：true、left或false、right。true表示固定在左侧',
|
|
686
|
+
code: `<span class="api-code">fixed: "left",// 列左侧固定</span>`
|
|
687
|
+
}, {
|
|
688
|
+
name: 'resizable',
|
|
689
|
+
type: '布尔',
|
|
690
|
+
default: 'true',
|
|
691
|
+
memo: '是否拖动改变宽度。true可拖动，false不可拖动。',
|
|
692
|
+
code: `<span class="api-code">resizable: false,// 列宽不能拖动</span>`
|
|
693
|
+
}, {
|
|
694
|
+
group: '通用：显示渲染',
|
|
695
|
+
name: 'renderHeader',
|
|
696
|
+
type: '方法',
|
|
697
|
+
default: '',
|
|
698
|
+
memo: '参数：(h, param)或(h, {column, $index })<br>列标题自定义渲染',
|
|
699
|
+
code: `<span class="api-code"></span>`
|
|
700
|
+
}, {
|
|
701
|
+
name: 'showOverflowTooltip',
|
|
702
|
+
type: '布尔',
|
|
703
|
+
default: 'false',
|
|
704
|
+
memo: '内容过长超过列宽隐藏。鼠标hover显示tooltip。<br> true显示，false不显示。<br><span class="api-memo">注：有效解决内容太长，产生行自动换行问题。</span>',
|
|
705
|
+
code: `<span class="api-code">showOverflowTooltip: true,// 内容超出隐藏</span>`
|
|
706
|
+
}, {
|
|
707
|
+
name: 'html',
|
|
708
|
+
type: '方法',
|
|
709
|
+
default: '',
|
|
710
|
+
memo: '列渲染为html。参数：(value:列对应值, row:行数据)<br><span class="api-memo">注：1、只能使用html标签，vue或element组件无效。<br>2、定义了html，那么renderHtml无效。</span>',
|
|
711
|
+
code: '<span class="api-code">html: function (value, row) { return value;}</span>'
|
|
712
|
+
}, {
|
|
713
|
+
name: 'renderKey',
|
|
714
|
+
type: '对象',
|
|
715
|
+
default: '',
|
|
716
|
+
memo: '键值映射。如：将typeId，映射为typeId对应的Name。<br><span class="api-memo">注：1、需要映射时，必填。<br>2、当前row的prop，会被自动设为label对应的文本。</span>',
|
|
717
|
+
code: '<span class="api-code"> renderKey: {label: "key", value: "value", key: "fdTypeId"}</span>'
|
|
718
|
+
}, {
|
|
719
|
+
name: 'renderOptions',
|
|
720
|
+
type: '数组',
|
|
721
|
+
default: '',
|
|
722
|
+
memo: '键值映射，对应的数组。',
|
|
723
|
+
code: '<span class="api-code">renderOptions: [{key: 1, value: "哈哈哈"},{id:2, name: "呵呵呵"}],</span>'
|
|
724
|
+
}, {
|
|
725
|
+
name: 'renderOptionsRemote',
|
|
726
|
+
type: '方法',
|
|
727
|
+
default: '',
|
|
728
|
+
memo: '键值映射，对应的数组。后台传递list。<br><span class="api-memo">参考【selectOptionsRemote】</span>',
|
|
729
|
+
code: '<span class="api-code">renderOptionsRemote: "dicList",</span>'
|
|
730
|
+
}, {
|
|
731
|
+
name: 'renderHtml',
|
|
732
|
+
type: '方法',
|
|
733
|
+
default: '',
|
|
734
|
+
memo: '键值映射，对应值的渲染。<span class="api-memo"></span>',
|
|
735
|
+
code: '<span class="api-code">renderHtml: (value, text, row) => {\n' +
|
|
724
736
|
' return \'<span style="color: red;"> \' + text+ \'</span>\';\n' +
|
|
725
737
|
'}</span>'
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
738
|
+
}
|
|
739
|
+
]
|
|
740
|
+
const colAttrData_input = [{
|
|
741
|
+
group: '类型:input',
|
|
742
|
+
name: '',
|
|
743
|
+
type: '',
|
|
744
|
+
default: '',
|
|
745
|
+
memo: ''
|
|
746
|
+
}]
|
|
747
|
+
const colAttrData_inputNumber = [
|
|
748
|
+
{
|
|
749
|
+
group: '类型:inputNumber',
|
|
750
|
+
name: 'inputNumberMin',
|
|
751
|
+
type: '数字',
|
|
752
|
+
default: '0',
|
|
753
|
+
memo: '最小值',
|
|
754
|
+
code: `<span class="api-code">inputNumberMin: 1,// 最小值1</span>`
|
|
755
|
+
}, {
|
|
756
|
+
name: 'inputNumberMax',
|
|
757
|
+
type: '数字',
|
|
758
|
+
default: '0',
|
|
759
|
+
memo: '最大值',
|
|
760
|
+
code: `<span class="api-code">inputNumberMax: 10,// 最大值10</span>`
|
|
761
|
+
}]
|
|
762
|
+
const colAttrData_slot = [
|
|
763
|
+
{
|
|
764
|
+
group: '类型:slot',
|
|
765
|
+
name: 'slot',
|
|
766
|
+
type: '数字',
|
|
767
|
+
default: '0',
|
|
768
|
+
memo: '自定义内容<br><span class="api-memo">注：只读和编辑时，都是slot内容，可以使用row.isEdit、row.isAdd判断状态。</span>',
|
|
769
|
+
code: `<div class="api-code">1、ap-table组件下定义插槽
|
|
758
770
|
<ap-table :options.sync="tableOpt">
|
|
759
771
|
<template #sex="slotProps">
|
|
760
772
|
<el-tag type="success">{{slotProps.rowData.sex}}</el-tag>
|
|
@@ -762,132 +774,132 @@ edit: (rowData) => {return true;}</div>`
|
|
|
762
774
|
</ap-table>
|
|
763
775
|
2、column列指定slot
|
|
764
776
|
{ prop: "sex", label: "性别", type: "slot", slot: "sex"}</div>`
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
777
|
+
}]
|
|
778
|
+
const colAttrData_select = [
|
|
779
|
+
{
|
|
780
|
+
group: '类型:select',
|
|
781
|
+
name: 'selectOptions',
|
|
782
|
+
type: '数组',
|
|
783
|
+
default: '',
|
|
784
|
+
memo: '下拉框的下拉选项。格式：[{label:"", value:""},...]',
|
|
785
|
+
code: `<span class="api-code">selectOptions:[{label:"男", value:"1"},{label:"女", value:"0"}]</span>`
|
|
786
|
+
}, {
|
|
787
|
+
name: 'selectOptionsKey',
|
|
788
|
+
type: '对象',
|
|
789
|
+
default: '{label:"label", value:"value"}',
|
|
790
|
+
memo: '下拉选型的键值对应关系。格式：{label:"显示值对应属性", value:"实际值对应属性"}',
|
|
791
|
+
code: `<div class="api-code">1、selectOptions中的对象不是默认label/value形式
|
|
780
792
|
selectOptions:[{name:"tony", realName:"张三"},{name:"jay", realName:"李四"}]
|
|
781
793
|
2、selectOptionsKey指定对应的属性值
|
|
782
794
|
selectOptionsKey:{label:"name", value:"realName"}</div>`
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
795
|
+
}, {
|
|
796
|
+
name: 'selectOptionsRemote',
|
|
797
|
+
type: '字符串',
|
|
798
|
+
default: '',
|
|
799
|
+
memo: '请求数据时后台返回对应的数组。<br><span class="api-memo">注：存在selectOptions或不是后台请求时，该设置无效。</span>',
|
|
800
|
+
code: `<div class="api-code">1、后台查询PageResult设定attr
|
|
789
801
|
PageResult ps = ....; map.put("typeList", ...); ps.setAttr(map);
|
|
790
802
|
2、selectOptionsRemote指定下拉选项
|
|
791
803
|
selectOptionsRemote:typeList</div>`
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
804
|
+
}, {
|
|
805
|
+
name: 'selectHtml',
|
|
806
|
+
type: '方法',
|
|
807
|
+
default: '',
|
|
808
|
+
memo: '列渲染为html。参数：(value:列对应值, text:文本值, row:行数据)<br>' +
|
|
797
809
|
'<span class="api-memo">注：只能使用html标签，vue或element组件无效。</span>',
|
|
798
|
-
|
|
810
|
+
code: `<div class="api-code"> selectHtml:(value, text, row)=>{
|
|
799
811
|
return '<span>' + text + '</span>'
|
|
800
812
|
}</div>`
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
813
|
+
}, {
|
|
814
|
+
name: 'selectMultiple',
|
|
815
|
+
type: '布尔',
|
|
816
|
+
default: 'false',
|
|
817
|
+
memo: '下拉多选。<br> true多选，false单选。',
|
|
818
|
+
code: `<div class="api-code">selectMultiple:true // 多选</div>`
|
|
819
|
+
}, {
|
|
820
|
+
name: 'selectFilterable',
|
|
821
|
+
type: '布尔',
|
|
822
|
+
default: 'true',
|
|
823
|
+
memo: '下拉搜索。<br> true可搜索，false不可搜索。',
|
|
824
|
+
code: `<div class="api-code">selectFilterable:false // 不可搜索</div>`
|
|
825
|
+
}, {
|
|
826
|
+
name: 'selectPlaceholder',
|
|
827
|
+
type: '字符串',
|
|
828
|
+
default: '请选择',
|
|
829
|
+
memo: '占位符',
|
|
830
|
+
code: `<div class="api-code">selectPlaceholder:"请选择类型"</div>`
|
|
831
|
+
}, {
|
|
832
|
+
name: 'selectIsGroup',
|
|
833
|
+
type: '布尔',
|
|
834
|
+
default: 'false',
|
|
835
|
+
memo: '是否分组。<br> true分组，false非分组。',
|
|
836
|
+
code: `<div class="api-code"> 1、selectOptions分组选项
|
|
825
837
|
selectOptions: [ { label: "组1",
|
|
826
838
|
options: [{label: "张三", value: "zs"},{label: "李四", value: "ls"}]
|
|
827
839
|
},{ label: "组2",
|
|
828
840
|
options: [{label: "王五", value: "ww"},{label: "赵六", value: "zl"}]}]
|
|
829
841
|
2、设定为分组
|
|
830
842
|
selectIsGroup: true,</div>`
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
843
|
+
}]
|
|
844
|
+
const colAttrData_cascader = [
|
|
845
|
+
{
|
|
846
|
+
group: '类型:cascader',
|
|
847
|
+
name: 'cascaderOptions',
|
|
848
|
+
type: '数组',
|
|
849
|
+
default: '',
|
|
850
|
+
memo: '级联选项'
|
|
851
|
+
}, {
|
|
852
|
+
name: 'cascaderShowAllLevels',
|
|
853
|
+
type: '布尔',
|
|
854
|
+
default: 'false',
|
|
855
|
+
memo: '完整路径'
|
|
856
|
+
}]
|
|
857
|
+
const colAttrData_expand = [
|
|
858
|
+
{
|
|
859
|
+
group: '类型:expand',
|
|
860
|
+
name: 'expandSlot',
|
|
861
|
+
type: '字符串',
|
|
862
|
+
default: '',
|
|
863
|
+
memo: '展开行，使用插槽',
|
|
864
|
+
code: `<div class="api-code"> 1、ap-table组件下定义插槽
|
|
853
865
|
<template #test="expandProps">
|
|
854
866
|
{{expandProps.rowData.sex}}
|
|
855
867
|
</template>
|
|
856
868
|
2、展开行的列指定插槽
|
|
857
869
|
{label: "展开",type: "expand",expand: "test"}</div>`
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
870
|
+
}]
|
|
871
|
+
const colAttrData_search = [
|
|
872
|
+
{
|
|
873
|
+
group: '类型:search',
|
|
874
|
+
name: 'searchTitle',
|
|
875
|
+
type: '字符串',
|
|
876
|
+
default: '查找',
|
|
877
|
+
memo: '弹出框标题',
|
|
878
|
+
code: `<div class="api-code">searchTitle:"请选择"</div>`
|
|
879
|
+
}, {
|
|
880
|
+
name: 'searchWidth',
|
|
881
|
+
type: '字符串',
|
|
882
|
+
default: '500px',
|
|
883
|
+
memo: '弹出框宽度。字符串，百分比或者px',
|
|
884
|
+
code: `<div class="api-code">searchWidth:"300px"</div>`
|
|
885
|
+
}, {
|
|
886
|
+
name: 'searchConfirm',
|
|
887
|
+
type: '方法',
|
|
888
|
+
default: '',
|
|
889
|
+
memo: '点击确定回调。参数：row。返回true关闭dialog。',
|
|
890
|
+
code: `<div class="api-code"></div>`
|
|
891
|
+
}, {
|
|
892
|
+
name: 'searchClear',
|
|
893
|
+
type: '方法',
|
|
894
|
+
default: '',
|
|
895
|
+
memo: '点击清空回调。参数：row。返回true关闭dialog。',
|
|
896
|
+
code: ``
|
|
897
|
+
}, {
|
|
898
|
+
name: 'searchSlot',
|
|
899
|
+
type: '字符串',
|
|
900
|
+
default: '',
|
|
901
|
+
memo: '弹出框插槽',
|
|
902
|
+
code: `<div class="api-code">1、ap-table组件下定义插槽
|
|
891
903
|
<ap-table ...>
|
|
892
904
|
<template #searchSlotName="searchProps">
|
|
893
905
|
<el-input v-model="searchDialogInput" placeholder="请输入内容"></el-input>
|
|
@@ -900,59 +912,77 @@ selectIsGroup: true,</div>`
|
|
|
900
912
|
searchConfirm: (row) => { row.mail = this.searchDialogInput;},
|
|
901
913
|
searchClear:(row) => { row.mail = '';}
|
|
902
914
|
}</div>`
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
915
|
+
}]
|
|
916
|
+
const colAttrData_searchTable = [
|
|
917
|
+
{
|
|
918
|
+
group: '类型:searchTable',
|
|
919
|
+
name: 'searchTableTitle',
|
|
920
|
+
type: '字符串',
|
|
921
|
+
default: '查找',
|
|
922
|
+
memo: '弹出框标题',
|
|
923
|
+
code: `<div class="api-code">searchTable:"请选择"</div>`
|
|
924
|
+
}, {
|
|
925
|
+
name: 'searchTableWidth',
|
|
926
|
+
type: '字符串',
|
|
927
|
+
default: '500px',
|
|
928
|
+
memo: '弹出框宽度。字符串，百分比或者px',
|
|
929
|
+
code: `<div class="api-code">searchTableWidth:"300px"</div>`
|
|
930
|
+
}, {
|
|
931
|
+
name: 'searchTableHeight',
|
|
932
|
+
type: '字符串',
|
|
933
|
+
default: '400px',
|
|
934
|
+
memo: '表格得高度。',
|
|
935
|
+
code: `<div class="api-code"></div>`
|
|
936
|
+
}, {
|
|
937
|
+
name: 'searchTableOpt',
|
|
938
|
+
type: '对象',
|
|
939
|
+
default: '',
|
|
940
|
+
memo: '表格参数，同表格组件',
|
|
941
|
+
code: `<div class="api-code"></div>`
|
|
942
|
+
}, {
|
|
943
|
+
name: 'searchTableShowParam',
|
|
944
|
+
type: '布尔',
|
|
945
|
+
default: 'false',
|
|
946
|
+
memo: '表格顶部显示搜索框',
|
|
947
|
+
code: `searchTableShowParam: true,`
|
|
948
|
+
}, {
|
|
949
|
+
name: 'searchTableParamPlaceholder',
|
|
950
|
+
type: '字符串',
|
|
951
|
+
default: '关键字过滤，回车搜索',
|
|
952
|
+
memo: '表格顶部显示搜索框，占位符',
|
|
953
|
+
code: `searchTableParamPlaceholder: "模糊匹配，回车搜索",`
|
|
954
|
+
}, {
|
|
955
|
+
name: 'searchTableParamKey',
|
|
956
|
+
type: '字符串',
|
|
957
|
+
default: 'likeStr',
|
|
958
|
+
memo: '表格顶部搜索框，查询参数名称。注：自动带到后台controller的查询参数',
|
|
959
|
+
code: `searchTableParamKey: "name",`
|
|
960
|
+
}, {
|
|
961
|
+
name: 'searchTableLoadTime',
|
|
962
|
+
type: '字符串',
|
|
963
|
+
default: 'edit',
|
|
964
|
+
memo: '数据加载时间。<br>edit：添加或编辑行时，第一次点击加载一次。click：每次点击按钮时，都会重新加载',
|
|
965
|
+
code: `<div class="api-code"> searchTableLoadTime: "click",</div>`
|
|
966
|
+
}, {
|
|
967
|
+
name: 'searchTableBeforeClick',
|
|
968
|
+
type: '方法',
|
|
969
|
+
default: '',
|
|
970
|
+
memo: '点击打开dialog前调用。<br>参数：row。返回true，打开dialog。返回false，不打开。',
|
|
971
|
+
code: `<div class="api-code">searchTableBeforeClick: (row) => {
|
|
942
972
|
return true;
|
|
943
973
|
}</div>`
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
974
|
+
}, {
|
|
975
|
+
name: 'searchTableClear',
|
|
976
|
+
type: '方法',
|
|
977
|
+
default: '',
|
|
978
|
+
memo: '点击清空回调。参数：row。返回true关闭dialog。',
|
|
979
|
+
code: `<div class="api-code"></div>`
|
|
980
|
+
}, {
|
|
981
|
+
name: 'searchTableConfirm',
|
|
982
|
+
type: '方法',
|
|
983
|
+
default: '',
|
|
984
|
+
memo: '点击确定回调。参数：row, selectedRows。返回true关闭dialog。',
|
|
985
|
+
code: `<div class="api-code">// searchTable示例
|
|
956
986
|
{
|
|
957
987
|
prop: "fdName",
|
|
958
988
|
label: "组织名称",
|
|
@@ -967,42 +997,42 @@ selectIsGroup: true,</div>`
|
|
|
967
997
|
searchTableConfirm: (row, selectedRow) => { return true;},
|
|
968
998
|
searchTableClear: (row) => { return true;},
|
|
969
999
|
}</div>`
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1000
|
+
}]
|
|
1001
|
+
const colAttrData_searchTree = [
|
|
1002
|
+
{
|
|
1003
|
+
group: '类型:searchTree',
|
|
1004
|
+
name: 'searchTreeTitle',
|
|
1005
|
+
type: '字符串',
|
|
1006
|
+
default: '查找',
|
|
1007
|
+
memo: '弹出框标题',
|
|
1008
|
+
code: `<div class="api-code">searchTreeTitle:"请选择"</div>`
|
|
1009
|
+
}, {
|
|
1010
|
+
name: 'searchTreeWidth',
|
|
1011
|
+
type: '字符串',
|
|
1012
|
+
default: '400px',
|
|
1013
|
+
memo: '弹出框宽度。百分比或者px。',
|
|
1014
|
+
code: `<div class="api-code"></div>`
|
|
1015
|
+
}, {
|
|
1016
|
+
name: 'searchTreeHeight',
|
|
1017
|
+
type: '字符串',
|
|
1018
|
+
default: '400px',
|
|
1019
|
+
memo: '树容器的高度。百分比或者px。',
|
|
1020
|
+
code: `<div class="api-code"></div>`
|
|
1021
|
+
}, {
|
|
1022
|
+
name: 'searchTreeKey',
|
|
1023
|
+
type: '对象',
|
|
1024
|
+
default: '见描述',
|
|
1025
|
+
memo: '默认：{idKey:"fdId",parentKey:"fdParentId", labelKey:"fdName"}<br>结果集映射关系。labelKey：显示内容。',
|
|
1026
|
+
code: `<div class="api-code"></div>`
|
|
1027
|
+
}, {
|
|
1028
|
+
name: 'searchTreeRenderKey',
|
|
1029
|
+
type: '对象',
|
|
1030
|
+
default: '',
|
|
1031
|
+
memo: '不为空时，列的显示值将渲染树组件的值。<br>参数：idKey, labelKey。<br>' +
|
|
1002
1032
|
'1、idKey：必填。<span class="api-memo">注：匹配方式 -> 行数据[searchTreeRenderKey.idKey] = 树[searchTreeKey.idKey]</span><br>' +
|
|
1003
1033
|
'2、labelKey：列的显示值对应树的data的属性。默认为searchTreeKey.labelKey的值。<br>' +
|
|
1004
1034
|
'<span class="api-memo">注：searchTreeLoadTime为init时有效</span>',
|
|
1005
|
-
|
|
1035
|
+
code: `<div class="api-code">// 后台传部门id，前端显示为部门全称
|
|
1006
1036
|
{
|
|
1007
1037
|
prop: 'fdOrgName',
|
|
1008
1038
|
label: '部门名称',
|
|
@@ -1018,84 +1048,84 @@ selectIsGroup: true,</div>`
|
|
|
1018
1048
|
return true;
|
|
1019
1049
|
},
|
|
1020
1050
|
}</div>`
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1051
|
+
}, {
|
|
1052
|
+
name: 'searchTreeUrl',
|
|
1053
|
+
type: '字符串',
|
|
1054
|
+
default: '',
|
|
1055
|
+
memo: '数据请求路径。返回response.data',
|
|
1056
|
+
code: `<div class="api-code"></div>`
|
|
1057
|
+
}, {
|
|
1058
|
+
name: 'searchTreeParams',
|
|
1059
|
+
type: '对象/方法',
|
|
1060
|
+
default: '',
|
|
1061
|
+
memo: '数据请求的参数。 <br>方法时参数：row, col。表格行的数据对象、列属性。',
|
|
1062
|
+
code: `<div class="api-code">1、固定参数：定义对象
|
|
1033
1063
|
searchTreeParams: { type: 123}
|
|
1034
1064
|
2、动态参数：使用箭头函数
|
|
1035
1065
|
searchTreeParams: (row, col) => {
|
|
1036
1066
|
return { type: this.typeId}
|
|
1037
1067
|
}</div>`
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1068
|
+
}, {
|
|
1069
|
+
name: 'searchTreeLoadTime',
|
|
1070
|
+
type: '字符串',
|
|
1071
|
+
default: 'init',
|
|
1072
|
+
memo: '数据加载时间。<br>init：表格初始化是加载。edit：添加或编辑行时加载一次。click：每次点击按钮时，都会重新加载',
|
|
1073
|
+
code: `<div class="api-code"> searchTreeLoadTime: "click",</div>`
|
|
1074
|
+
}, {
|
|
1075
|
+
name: 'searchTreeMethod',
|
|
1076
|
+
type: '字符串',
|
|
1077
|
+
default: 'post',
|
|
1078
|
+
memo: '数据请求method。get或post',
|
|
1079
|
+
code: `<div class="api-code"></div>`
|
|
1080
|
+
}, {
|
|
1081
|
+
name: 'searchTreeSelectMultiple',
|
|
1082
|
+
type: '布尔',
|
|
1083
|
+
default: 'false',
|
|
1084
|
+
memo: '是否多选，默认单选。',
|
|
1085
|
+
code: `<div class="api-code"></div>`
|
|
1086
|
+
}, {
|
|
1087
|
+
name: 'searchTreeExpandAll',
|
|
1088
|
+
type: '布尔',
|
|
1089
|
+
default: 'true',
|
|
1090
|
+
memo: '是否展开树，默认展开。<br><span class="api-memo">注：数据量大时，默认展开会导致页面卡顿。</span>',
|
|
1091
|
+
code: `<div class="api-code"></div>`
|
|
1092
|
+
}, {
|
|
1093
|
+
name: 'searchTreeCheckStrictly',
|
|
1094
|
+
type: '布尔',
|
|
1095
|
+
default: 'true',
|
|
1096
|
+
memo: '是否严格的遵循父子不互相关联的做法',
|
|
1097
|
+
code: `<div class="api-code"></div>`
|
|
1098
|
+
}, {
|
|
1099
|
+
name: 'searchTreeDefaultCheckedKeys',
|
|
1100
|
+
type: '数组/方法',
|
|
1101
|
+
default: '[]',
|
|
1102
|
+
memo: '点击打开dialog，默认选中节点id。<br>方法参数：row。',
|
|
1103
|
+
code: `<div class="api-code">1、固定参数：定义数组
|
|
1074
1104
|
searchTreeDefaultCheckedKeys: ["xxx"],
|
|
1075
1105
|
2、动态参数：使用箭头函数
|
|
1076
1106
|
searchTreeDefaultCheckedKeys:(row) =>{
|
|
1077
1107
|
return ["xxx"];
|
|
1078
1108
|
}</div>`
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1109
|
+
}, {
|
|
1110
|
+
name: 'searchTreeBeforeClick',
|
|
1111
|
+
type: '方法',
|
|
1112
|
+
default: '',
|
|
1113
|
+
memo: '点击打开dialog前调用。<br>参数：row。返回true，打开dialog。返回false，不打开。',
|
|
1114
|
+
code: `<div class="api-code">searchTreeBeforeClick: (row) => {
|
|
1085
1115
|
return true;
|
|
1086
1116
|
}</div>`
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1117
|
+
}, {
|
|
1118
|
+
name: 'searchTreeClear',
|
|
1119
|
+
type: '方法',
|
|
1120
|
+
default: '',
|
|
1121
|
+
memo: '点击清空回调。参数：row。返回true关闭dialog。',
|
|
1122
|
+
code: `<div class="api-code"></div>`
|
|
1123
|
+
}, {
|
|
1124
|
+
name: 'searchTreeConfirm',
|
|
1125
|
+
type: '方法',
|
|
1126
|
+
default: '',
|
|
1127
|
+
memo: '点击确定回调。参数：row, selectedRows。返回true关闭dialog。',
|
|
1128
|
+
code: `<div class="api-code">// searchTree 示例：
|
|
1099
1129
|
{
|
|
1100
1130
|
prop: "mail",
|
|
1101
1131
|
label: "邮箱",
|
|
@@ -1105,123 +1135,123 @@ searchTreeDefaultCheckedKeys:(row) =>{
|
|
|
1105
1135
|
searchTreeClear:(row) => {return true;},
|
|
1106
1136
|
}
|
|
1107
1137
|
</div>`
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1138
|
+
}]
|
|
1139
|
+
const colAttrData_searchPicker = [
|
|
1140
|
+
{
|
|
1141
|
+
group: '类型:searchPicker',
|
|
1142
|
+
name: 'searchPickerTitle',
|
|
1143
|
+
type: '字符串',
|
|
1144
|
+
default: '查找',
|
|
1145
|
+
memo: '弹出框标题',
|
|
1146
|
+
code: `<div class="api-code">searchPickerTitle:"请选择"</div>`
|
|
1147
|
+
}, {
|
|
1148
|
+
name: 'searchPickerWidth',
|
|
1149
|
+
type: '字符串',
|
|
1150
|
+
default: '800px',
|
|
1151
|
+
memo: '弹出框宽度。百分比或者px。',
|
|
1152
|
+
code: `<div class="api-code"></div>`
|
|
1153
|
+
}, {
|
|
1154
|
+
name: 'searchPickerHeight',
|
|
1155
|
+
type: '字符串',
|
|
1156
|
+
default: '400px',
|
|
1157
|
+
memo: '树容器的高度。百分比或者px。',
|
|
1158
|
+
code: `<div class="api-code"></div>`
|
|
1159
|
+
}, {
|
|
1160
|
+
name: 'searchPickerKey',
|
|
1161
|
+
type: '对象',
|
|
1162
|
+
default: '见描述',
|
|
1163
|
+
memo: '默认：{idKey:"fdId",parentKey:"fdParentId", labelKey:"fdName"}<br>左侧树：结果集映射关系。labelKey：显示内容。',
|
|
1164
|
+
code: `<div class="api-code"></div>`
|
|
1165
|
+
}, {
|
|
1166
|
+
name: 'searchPickerUrl',
|
|
1167
|
+
type: '字符串',
|
|
1168
|
+
default: '',
|
|
1169
|
+
memo: '左侧树：数据请求路径。返回response.data',
|
|
1170
|
+
code: `<div class="api-code"></div>`
|
|
1171
|
+
}, {
|
|
1172
|
+
name: 'searchPickerParams',
|
|
1173
|
+
type: '对象/方法',
|
|
1174
|
+
default: '',
|
|
1175
|
+
memo: '左侧树：数据请求的参数。 <br>方法时参数：row, col。表格行的数据对象、列属性。',
|
|
1176
|
+
code: `<div class="api-code">1、固定参数：定义对象
|
|
1147
1177
|
searchPickerParams: { type: 123}
|
|
1148
1178
|
2、动态参数：使用箭头函数
|
|
1149
1179
|
searchPickerParams: (row, col) => {
|
|
1150
1180
|
return { type: this.typeId}
|
|
1151
1181
|
}</div>`
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1182
|
+
}, {
|
|
1183
|
+
name: 'searchPickerLoadTime',
|
|
1184
|
+
type: '字符串',
|
|
1185
|
+
default: 'init',
|
|
1186
|
+
memo: '数据加载时间。<br>init：表格初始化是加载。edit：添加或编辑行时加载一次。click：每次点击按钮时，都会重新加载',
|
|
1187
|
+
code: `<div class="api-code"> searchPickerLoadTime: "click",</div>`
|
|
1188
|
+
}, {
|
|
1189
|
+
name: 'searchPickerMethod',
|
|
1190
|
+
type: '字符串',
|
|
1191
|
+
default: 'post',
|
|
1192
|
+
memo: '左侧树：数据请求method。get或post',
|
|
1193
|
+
code: `<div class="api-code"></div>`
|
|
1194
|
+
}, {
|
|
1195
|
+
name: 'searchPickerExpandAll',
|
|
1196
|
+
type: '布尔',
|
|
1197
|
+
default: 'true',
|
|
1198
|
+
memo: '左侧树：是否展开树，默认展开。<br><span class="api-memo">注：数据量大时，默认展开会导致页面卡顿。</span>',
|
|
1199
|
+
code: `<div class="api-code"></div>`
|
|
1200
|
+
}, {
|
|
1201
|
+
name: 'searchPickerSelectMultipleMain',
|
|
1202
|
+
type: '布尔',
|
|
1203
|
+
default: 'false',
|
|
1204
|
+
memo: '右侧列表：是否多选，默认单选。',
|
|
1205
|
+
code: `<div class="api-code"></div>`
|
|
1206
|
+
}, {
|
|
1207
|
+
name: 'searchPickerKeyMain',
|
|
1208
|
+
type: '对象',
|
|
1209
|
+
default: '见描述',
|
|
1210
|
+
memo: '默认：{idKey:"fdId",parentKey:"fdParentId", labelKey:"fdName"}<br>右侧列表：结果集映射关系。labelKey：显示内容。',
|
|
1211
|
+
code: `<div class="api-code"></div>`
|
|
1212
|
+
}, {
|
|
1213
|
+
name: 'searchPickerUrlMain',
|
|
1214
|
+
type: '字符串',
|
|
1215
|
+
default: '',
|
|
1216
|
+
memo: '右侧列表：数据请求路径。返回response.data',
|
|
1217
|
+
code: `<div class="api-code"></div>`
|
|
1218
|
+
}, {
|
|
1219
|
+
name: 'searchPickerParamsMain',
|
|
1220
|
+
type: '对象/方法',
|
|
1221
|
+
default: '见描述',
|
|
1222
|
+
memo: '右列表：数据请求的参数。不设定默认为左侧选中节点的对象。<br>方法时参数：row, col，selectedNode。表格行的数据对象、列属性、选中左侧节点。',
|
|
1223
|
+
code: `<div class="api-code">1、固定参数：定义对象
|
|
1194
1224
|
searchPickerParamsMain: { type: 123}
|
|
1195
1225
|
2、动态参数：使用箭头函数
|
|
1196
1226
|
searchPickerParamsMain: (row, col, selectedNode) => {
|
|
1197
1227
|
return { type: this.typeId}
|
|
1198
1228
|
}</div>`
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1229
|
+
}, {
|
|
1230
|
+
name: 'searchPickerMethodMain',
|
|
1231
|
+
type: '字符串',
|
|
1232
|
+
default: 'post',
|
|
1233
|
+
memo: '右侧列表：数据请求method。get或post',
|
|
1234
|
+
code: `<div class="api-code"></div>`
|
|
1235
|
+
}, {
|
|
1236
|
+
name: 'searchPickerBeforeClick',
|
|
1237
|
+
type: '方法',
|
|
1238
|
+
default: '',
|
|
1239
|
+
memo: '点击打开dialog前调用。<br>参数：row。返回true，打开dialog。返回false，不打开。',
|
|
1240
|
+
code: `<div class="api-code">searchPickerBeforeClick: (row) => {
|
|
1211
1241
|
return true;
|
|
1212
1242
|
}</div>`
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1243
|
+
}, {
|
|
1244
|
+
name: 'searchPickerClear',
|
|
1245
|
+
type: '方法',
|
|
1246
|
+
default: '',
|
|
1247
|
+
memo: '点击清空回调。参数：row。返回true关闭dialog。',
|
|
1248
|
+
code: `<div class="api-code"></div>`
|
|
1249
|
+
}, {
|
|
1250
|
+
name: 'searchPickerConfirm',
|
|
1251
|
+
type: '方法',
|
|
1252
|
+
default: '',
|
|
1253
|
+
memo: '点击确定回调。参数：row, selectedRows。返回true关闭dialog。',
|
|
1254
|
+
code: `<div class="api-code">// searchPicker 示例：
|
|
1225
1255
|
{
|
|
1226
1256
|
prop: 'fdTypeName',
|
|
1227
1257
|
label: '类型',
|
|
@@ -1240,410 +1270,415 @@ searchPickerParamsMain: (row, col, selectedNode) => {
|
|
|
1240
1270
|
},
|
|
1241
1271
|
}
|
|
1242
1272
|
</div>`
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1273
|
+
}]
|
|
1274
|
+
const colAttrData_datePicker = [
|
|
1275
|
+
{
|
|
1276
|
+
group: '类型:datePicker',
|
|
1277
|
+
name: 'datePickerType',
|
|
1278
|
+
type: '字符串',
|
|
1279
|
+
default: 'date',
|
|
1280
|
+
memo: '日期时间显示类型。year/month/date/time/datetime。<br><span class="api-memo">注：time->只有时分秒。datetime->日期时间</span>',
|
|
1281
|
+
code: `<div class="api-code">datePickerType:"time" // 时分秒选择</div>`
|
|
1282
|
+
}, {
|
|
1283
|
+
name: 'datePickerValueFormat',
|
|
1284
|
+
type: '字符串',
|
|
1285
|
+
default: 'timestamp',
|
|
1286
|
+
memo: '日期时间和后台交互实际格式。<br><span class="api-memo">注：年：yyyy，月：MM，日：dd，小时：HH，分：mm，秒：ss。时间戳：timestamp</span>',
|
|
1287
|
+
code: `<div class="api-code">datePickerValueFormat: 'yyyy-MM-dd HH:mm:ss', // 年月日时分秒</div>`
|
|
1288
|
+
}, {
|
|
1289
|
+
name: 'datePickerPlaceholder',
|
|
1290
|
+
type: '字符串',
|
|
1291
|
+
default: '请选择日期',
|
|
1292
|
+
memo: '占位符',
|
|
1293
|
+
code: `<div class="api-code">datePickerPlaceholder: '请选择时间', // 选择时间</div>`
|
|
1294
|
+
}, {
|
|
1295
|
+
name: 'datePickerDefaultValue',
|
|
1296
|
+
type: '字符串/方法',
|
|
1297
|
+
default: '当前时间',
|
|
1298
|
+
memo: '选择器打开时默认显示的时间。字符串或function返回格式："2020-11-11"、"10:11:12"、"2020-11-11 11:12:13"。<br><span class="api-memo">注：格式必须是上述三种其中的一种</span>',
|
|
1299
|
+
code: `<div class="api-code">datePickerDefaultValue: '2020-11-11 11:12:13', // 默认时间</div>`
|
|
1300
|
+
}, {
|
|
1301
|
+
name: 'datePickerFormat',
|
|
1302
|
+
type: '字符串',
|
|
1303
|
+
default: 'yyyy-MM-dd',
|
|
1304
|
+
memo: '显示在输入框中的格式。<br><span class="api-memo">注：datePickerType不是time时有效</span>',
|
|
1305
|
+
code: `<div class="api-code"></div>`
|
|
1306
|
+
}, {
|
|
1307
|
+
name: 'datePickerSelectableRange',
|
|
1308
|
+
type: '字符串/数组',
|
|
1309
|
+
default: '',
|
|
1310
|
+
memo: '可选时间段。格式："18:30:00 - 20:30:00"或["09:30:00 - 12:00:00", "14:30:00 - 18:30:00"]<br><span class="api-memo">注：datePickerType为time时有效</span>',
|
|
1311
|
+
code: `<div class="api-code">datePickerSelectableRange:"18:30:00 - 20:30:00"</div>`
|
|
1312
|
+
}]
|
|
1313
|
+
const colAttrData_all = colAttrData_base
|
|
1314
|
+
.concat(colAttrData_input)
|
|
1315
|
+
.concat(colAttrData_inputNumber)
|
|
1316
|
+
.concat(colAttrData_slot)
|
|
1317
|
+
.concat(colAttrData_select)
|
|
1318
|
+
.concat(colAttrData_cascader)
|
|
1319
|
+
.concat(colAttrData_expand)
|
|
1320
|
+
.concat(colAttrData_search)
|
|
1321
|
+
.concat(colAttrData_searchTable)
|
|
1322
|
+
.concat(colAttrData_searchTree)
|
|
1323
|
+
.concat(colAttrData_searchPicker)
|
|
1324
|
+
.concat(colAttrData_datePicker)
|
|
1295
1325
|
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1326
|
+
const methodCols = [
|
|
1327
|
+
{ label: '分类', prop: 'group', width: '80px' },
|
|
1328
|
+
{ label: '名称', prop: 'name', width: '200px' },
|
|
1329
|
+
{ label: '描述', prop: 'memo', minWidth: '100px' },
|
|
1330
|
+
{ label: '示例代码', prop: 'code', minWidth: '100px' }]
|
|
1331
|
+
const methodData_data = [
|
|
1332
|
+
{
|
|
1333
|
+
group: '请求数据',
|
|
1334
|
+
name: 'getData',
|
|
1335
|
+
memo: '获取当前页数据。<br>' +
|
|
1306
1336
|
'<span class="api-memo">注：1、等同于this.tableOpt.data。树形结构，则为返回树形结构数据。<br>2、可直接操作数据</span>',
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1337
|
+
code: '<span class="api-code">this.$refs.tableRef.getData();</span>'
|
|
1338
|
+
}, {
|
|
1339
|
+
name: 'getDataWithArray',
|
|
1340
|
+
memo: '获取当前页数据。<br><span class="api-memo">注：1、适用于树形结构数据，树形结构数据会转换成数组形式返回。<br>2、可直接操作数据。</span>',
|
|
1341
|
+
code: '<span class="api-code">this.$refs.tableRef.getDataWithArray();</span>'
|
|
1342
|
+
}, {
|
|
1343
|
+
name: 'getAllData',
|
|
1344
|
+
memo: '获取所有数据。<br><span class="api-memo">注：1、返回列表形式的数据。<br>2、后台分页时，同getData()。<br>3、前端分页时，不可以直接操作数据。</span>',
|
|
1345
|
+
code: '<span class="api-code">this.$refs.tableRef.getAllData();</span>'
|
|
1346
|
+
}, {
|
|
1347
|
+
name: 'getSelection',
|
|
1348
|
+
memo: '获取选中行数据。',
|
|
1349
|
+
code: '<span class="api-code">this.$refs.tableRef.getSelection();</span>'
|
|
1350
|
+
}, {
|
|
1351
|
+
name: 'getSelectionKeys',
|
|
1352
|
+
memo: '获取选中行key。<br><span class="api-memo">注：1、返回key的数组<br>2、必须定义rowKey</span>',
|
|
1353
|
+
code: '<span class="api-code">this.$refs.tableRef.getSelectionKeys();</span>'
|
|
1354
|
+
}, {
|
|
1355
|
+
name: 'getAddRowList',
|
|
1356
|
+
memo: '获取添加行数据。<br><span class="api-memo">注：返回添加行的数组</span>',
|
|
1357
|
+
code: '<span class="api-code">this.$refs.tableRef.getAddRowList();</span>'
|
|
1358
|
+
}, {
|
|
1359
|
+
name: 'getEditRowList',
|
|
1360
|
+
memo: '获取编辑行数据。<br><span class="api-memo">注：返回编辑行的数组</span>',
|
|
1361
|
+
code: '<span class="api-code">this.$refs.tableRef.getEditRowList();</span>'
|
|
1362
|
+
}, {
|
|
1363
|
+
name: 'getSaveData',
|
|
1364
|
+
memo: '获取保存时的数据，json对象。<br><span class="api-memo">注：即为保存时传到后台的数据，添加行、编辑行、删除行。<br>deleteRemote为true时，不包括删除行。</span>',
|
|
1365
|
+
code: '<span class="api-code">this.$refs.tableRef.getSaveData();</span>'
|
|
1366
|
+
}, {
|
|
1367
|
+
name: 'getSaveDataStr',
|
|
1368
|
+
memo: '获取保存时的数据，json字符串（传给controller使用）。<br><span class="api-memo">注：同getSaveData方法</span>',
|
|
1369
|
+
code: '<span class="api-code">this.$refs.tableRef.getSaveDataStr();</span>'
|
|
1370
|
+
}, {
|
|
1371
|
+
name: 'getRow',
|
|
1372
|
+
memo: '根据rowKey获取对应的行数据。<br>' +
|
|
1339
1373
|
'参数：rowKey<br>' +
|
|
1340
1374
|
'<span class="api-memo">注：可直接操作数据。</span> ',
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1375
|
+
code: '<span class="api-code">this.$refs.tableRef.getRow("id123")</span>'
|
|
1376
|
+
}]
|
|
1377
|
+
const methodData_operate = [
|
|
1378
|
+
{
|
|
1379
|
+
group: '操作',
|
|
1380
|
+
name: 'refresh',
|
|
1381
|
+
memo: '刷新表格数据<br><span class="api-memo">注：同点击刷新按钮。</span>',
|
|
1382
|
+
code: '<span class="api-code">this.$refs.tableRef.refresh();</span>'
|
|
1383
|
+
}, {
|
|
1384
|
+
name: 'reload',
|
|
1385
|
+
memo: '根据当前的options，重新渲染表格。<br>' +
|
|
1352
1386
|
'参数：boolean，是否加载数据。默认true，加载。<br>' +
|
|
1353
1387
|
'<span class="api-memo">注：适用于修改表格双向绑定不生效的参数（部分参数在表格created时，会有默认值覆盖的情况，导致双向绑定失效。如toolbarBtn）。</span>',
|
|
1354
|
-
|
|
1388
|
+
code: '<span class="api-code">// 重载表格 <br>this.$refs.tableRef.reload();<br>' +
|
|
1355
1389
|
'this.$refs.tableRef.reload(false);</span>'
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1390
|
+
}, {
|
|
1391
|
+
name: 'doSave',
|
|
1392
|
+
memo: '调用保存方法',
|
|
1393
|
+
code: '<span class="api-code">// 手动保存表格数据 <br>this.$refs.tableRef.doSave()</span>'
|
|
1394
|
+
}, {
|
|
1395
|
+
name: 'cancel',
|
|
1396
|
+
memo: '取消编辑。<br><span class="api-memo">注：同点击取消按钮</span>',
|
|
1397
|
+
code: '<span class="api-code">this.$refs.tableRef.cancel();</span>'
|
|
1398
|
+
}, {
|
|
1399
|
+
name: 'clear',
|
|
1400
|
+
memo: '清空表格数据。',
|
|
1401
|
+
code: '<span class="api-code">this.$refs.tableRef.clear();</span>'
|
|
1402
|
+
}, {
|
|
1403
|
+
name: 'clearSelected',
|
|
1404
|
+
memo: '清空选中数据。',
|
|
1405
|
+
code: '<span class="api-code">this.$refs.tableRef.clearSelected();</span>'
|
|
1406
|
+
}, {
|
|
1407
|
+
name: 'clearHighlight',
|
|
1408
|
+
memo: '清空高亮背景。',
|
|
1409
|
+
code: '<span class="api-code">this.$refs.tableRef.clearHighlight();</span>'
|
|
1410
|
+
}]
|
|
1411
|
+
const methodData_toggle = [
|
|
1412
|
+
{
|
|
1413
|
+
group: '触发事件',
|
|
1414
|
+
name: 'toggleRowSelection',
|
|
1415
|
+
memo: '切换行的选中状态。<br>参数1：row。表格行的数据对象(可以使用getData获取)。<br>参数2：selected。是否选中。true选中，false取消选中。',
|
|
1416
|
+
code: '<span class="api-code">// 选中行<br>this.$refs.tableRef.toggleRowSelection(row, true);</span>'
|
|
1417
|
+
}, {
|
|
1418
|
+
name: 'toggleRowSelectionByRowKey',
|
|
1419
|
+
memo: '切换行的选中状态。<br>参数1：rowKey。表格行的rowKey。<br>参数2：selected。是否选中。true选中，false取消选中。',
|
|
1420
|
+
code: '<span class="api-code">this.$refs.tableRef.toggleRowSelectionByRowKey("id123", true);</span>'
|
|
1421
|
+
}, {
|
|
1422
|
+
name: 'toggleEditRow',
|
|
1423
|
+
memo: '编辑行。<br>参数：row。表格行的数据对象。',
|
|
1424
|
+
code: '<span class="api-code">this.$refs.tableRef.toggleEditRow(row);</span>'
|
|
1425
|
+
}, {
|
|
1426
|
+
name: 'toggleEditRowByRowKey',
|
|
1427
|
+
memo: '编辑行。<br>参数：rowKey。编辑行的rowKey。<br><span class="api-memo">注：rowKey必须设定</span>',
|
|
1428
|
+
code: '<span class="api-code">this.$refs.tableRef.toggleEditRowByRowKey("id123");</span>'
|
|
1429
|
+
}, {
|
|
1430
|
+
name: 'toggleAddRow',
|
|
1431
|
+
memo: '添加行。<br>参数：row。添加行的对象。<br><span class="api-memo">注：addDefaultValue设定的默认值会无效。</span>',
|
|
1432
|
+
code: '<span class="api-code">this.$refs.tableRef.toggleAddRow(row);</span>'
|
|
1433
|
+
}]
|
|
1434
|
+
const methodData_other = [
|
|
1435
|
+
{
|
|
1436
|
+
group: '其他',
|
|
1437
|
+
name: 'validate',
|
|
1438
|
+
memo: '校验表格数据<br>参数：function。数据校验完成的回调方法，msg参数为空说明校验成功！<br><span class="api-memo">注：validate使用异步校验方法！</span>',
|
|
1439
|
+
code: '<span class="api-code">this.$refs.tableRef.validate((msg)=>{<br>console.log(msg);<br>});</span>'
|
|
1440
|
+
}]
|
|
1441
|
+
const methodData_all = methodData_data
|
|
1442
|
+
.concat(methodData_operate)
|
|
1443
|
+
.concat(methodData_toggle)
|
|
1444
|
+
.concat(methodData_other)
|
|
1407
1445
|
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1446
|
+
return {
|
|
1447
|
+
activeName: 'gridAttr',
|
|
1448
|
+
colAttrType: 'all',
|
|
1449
|
+
gridAttrType: 'all',
|
|
1450
|
+
eventType: 'all',
|
|
1451
|
+
methodType: 'all',
|
|
1414
1452
|
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1453
|
+
gridAttrData: gridAttrData_all,
|
|
1454
|
+
gridAttrData_data,
|
|
1455
|
+
gridAttrData_toolbar,
|
|
1456
|
+
gridAttrData_common,
|
|
1457
|
+
gridAttrData_col,
|
|
1458
|
+
gridAttrData_style,
|
|
1459
|
+
gridAttrData_tree,
|
|
1460
|
+
gridAttrData_other,
|
|
1461
|
+
gridAttrData_all,
|
|
1424
1462
|
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1463
|
+
colAttrData: colAttrData_all,
|
|
1464
|
+
colAttrData_base,
|
|
1465
|
+
colAttrData_input,
|
|
1466
|
+
colAttrData_inputNumber,
|
|
1467
|
+
colAttrData_slot,
|
|
1468
|
+
colAttrData_select,
|
|
1469
|
+
colAttrData_cascader,
|
|
1470
|
+
colAttrData_expand,
|
|
1471
|
+
colAttrData_search,
|
|
1472
|
+
colAttrData_searchTable,
|
|
1473
|
+
colAttrData_searchTree,
|
|
1474
|
+
colAttrData_searchPicker,
|
|
1475
|
+
colAttrData_datePicker,
|
|
1476
|
+
colAttrData_all,
|
|
1439
1477
|
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1478
|
+
eventData: eventData_all,
|
|
1479
|
+
eventData_callback,
|
|
1480
|
+
eventData_event,
|
|
1481
|
+
eventData_all,
|
|
1444
1482
|
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1483
|
+
methodData: methodData_all,
|
|
1484
|
+
methodData_data,
|
|
1485
|
+
methodData_operate,
|
|
1486
|
+
methodData_toggle,
|
|
1487
|
+
methodData_other,
|
|
1488
|
+
methodData_all,
|
|
1451
1489
|
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
},
|
|
1458
|
-
watch: {
|
|
1459
|
-
colAttrType: 'colAttrTypeChange',
|
|
1460
|
-
gridAttrType: 'gridAttrTypeChange',
|
|
1461
|
-
eventType: 'eventTypeChange',
|
|
1462
|
-
methodType: 'methodTypeChange'
|
|
1463
|
-
},
|
|
1464
|
-
methods: {
|
|
1465
|
-
colAttrTypeChange() {
|
|
1466
|
-
this.colAttrData = this['colAttrData_' + this.colAttrType]
|
|
1467
|
-
},
|
|
1468
|
-
gridAttrTypeChange() {
|
|
1469
|
-
this.gridAttrData = this['gridAttrData_' + this.gridAttrType]
|
|
1470
|
-
},
|
|
1471
|
-
eventTypeChange() {
|
|
1472
|
-
this.eventData = this['eventData_' + this.eventType]
|
|
1490
|
+
gridAttrCols,
|
|
1491
|
+
colAttrCols,
|
|
1492
|
+
eventCols,
|
|
1493
|
+
methodCols
|
|
1494
|
+
}
|
|
1473
1495
|
},
|
|
1474
|
-
|
|
1475
|
-
|
|
1496
|
+
watch: {
|
|
1497
|
+
colAttrType: 'colAttrTypeChange',
|
|
1498
|
+
gridAttrType: 'gridAttrTypeChange',
|
|
1499
|
+
eventType: 'eventTypeChange',
|
|
1500
|
+
methodType: 'methodTypeChange'
|
|
1476
1501
|
},
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1502
|
+
methods: {
|
|
1503
|
+
colAttrTypeChange() {
|
|
1504
|
+
this.colAttrData = this['colAttrData_' + this.colAttrType]
|
|
1505
|
+
},
|
|
1506
|
+
gridAttrTypeChange() {
|
|
1507
|
+
this.gridAttrData = this['gridAttrData_' + this.gridAttrType]
|
|
1508
|
+
},
|
|
1509
|
+
eventTypeChange() {
|
|
1510
|
+
this.eventData = this['eventData_' + this.eventType]
|
|
1511
|
+
},
|
|
1512
|
+
methodTypeChange() {
|
|
1513
|
+
this.methodData = this['methodData_' + this.methodType]
|
|
1514
|
+
},
|
|
1515
|
+
gridSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
1516
|
+
// 跨列常量
|
|
1517
|
+
const dataRowSpan = 13
|
|
1518
|
+
const toolbarRowSpan = 1
|
|
1519
|
+
const colRowSpan = 5
|
|
1520
|
+
const commonRowSpan = 5
|
|
1521
|
+
const styleRowSpan = 7
|
|
1522
|
+
const treeRowSpan = 3
|
|
1523
|
+
const noCommonRowSpan = 3
|
|
1524
|
+
// 事件回调
|
|
1525
|
+
const rollbackRowSpan = 11
|
|
1526
|
+
const eventRowSpan = 5
|
|
1489
1527
|
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1528
|
+
// 列属性
|
|
1529
|
+
const columnsRowSpan = 1
|
|
1530
|
+
const colCommonRowSpan = 11
|
|
1531
|
+
const colCommonStyleRowSpan = 6
|
|
1532
|
+
const colCommonRenderRowSpan = 7
|
|
1533
|
+
const inputRowSpan = 1
|
|
1534
|
+
const inputNumberRowSpan = 2
|
|
1535
|
+
const slotRowSpan = 1
|
|
1536
|
+
const selectRowSpan = 8
|
|
1537
|
+
const cascaderRowSpan = 2
|
|
1538
|
+
const expandRowSpan = 1
|
|
1539
|
+
const searchRowSpan = 5
|
|
1540
|
+
const searchTableRowSpan = 11
|
|
1541
|
+
const searchTreeRowSpan = 16
|
|
1542
|
+
const searchPickerRowSpan = 17
|
|
1543
|
+
const datePickerRowSpan = 6
|
|
1506
1544
|
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1545
|
+
// 方法
|
|
1546
|
+
const getDataRowSpan = 10
|
|
1547
|
+
const operateRowSpan = 6
|
|
1548
|
+
const toggleRowSpan = 5
|
|
1549
|
+
const otherRowSpan = 1
|
|
1512
1550
|
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1551
|
+
if (column.property != 'group') {
|
|
1552
|
+
return
|
|
1553
|
+
}
|
|
1516
1554
|
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
rowspan = otherRowSpan
|
|
1611
|
-
break
|
|
1612
|
-
}
|
|
1555
|
+
let rowspan = 0
|
|
1556
|
+
let colspan = 0
|
|
1557
|
+
if (row.group == null) {
|
|
1558
|
+
rowspan = 0
|
|
1559
|
+
colspan = 0
|
|
1560
|
+
}
|
|
1561
|
+
colspan = 1
|
|
1562
|
+
switch (row.group) {
|
|
1563
|
+
case '数据':
|
|
1564
|
+
rowspan = dataRowSpan
|
|
1565
|
+
break
|
|
1566
|
+
case '工具栏':
|
|
1567
|
+
rowspan = toolbarRowSpan
|
|
1568
|
+
break
|
|
1569
|
+
case '列属性':
|
|
1570
|
+
rowspan = columnsRowSpan
|
|
1571
|
+
break
|
|
1572
|
+
case '通用：常规':
|
|
1573
|
+
rowspan = colCommonRowSpan
|
|
1574
|
+
break
|
|
1575
|
+
case '通用：式样':
|
|
1576
|
+
rowspan = colCommonStyleRowSpan
|
|
1577
|
+
break
|
|
1578
|
+
case '通用：显示渲染':
|
|
1579
|
+
rowspan = colCommonRenderRowSpan
|
|
1580
|
+
break
|
|
1581
|
+
case '类型:input':
|
|
1582
|
+
rowspan = inputRowSpan
|
|
1583
|
+
break
|
|
1584
|
+
case '类型:inputNumber':
|
|
1585
|
+
rowspan = inputNumberRowSpan
|
|
1586
|
+
break
|
|
1587
|
+
case '类型:slot':
|
|
1588
|
+
rowspan = slotRowSpan
|
|
1589
|
+
break
|
|
1590
|
+
case '类型:select':
|
|
1591
|
+
rowspan = selectRowSpan
|
|
1592
|
+
break
|
|
1593
|
+
case '类型:cascader':
|
|
1594
|
+
rowspan = cascaderRowSpan
|
|
1595
|
+
break
|
|
1596
|
+
case '类型:expand':
|
|
1597
|
+
rowspan = expandRowSpan
|
|
1598
|
+
break
|
|
1599
|
+
case '类型:search':
|
|
1600
|
+
rowspan = searchRowSpan
|
|
1601
|
+
break
|
|
1602
|
+
case '类型:searchTable':
|
|
1603
|
+
rowspan = searchTableRowSpan
|
|
1604
|
+
break
|
|
1605
|
+
case '类型:searchTree':
|
|
1606
|
+
rowspan = searchTreeRowSpan
|
|
1607
|
+
break
|
|
1608
|
+
case '类型:searchPicker':
|
|
1609
|
+
rowspan = searchPickerRowSpan
|
|
1610
|
+
break
|
|
1611
|
+
case '类型:datePicker':
|
|
1612
|
+
rowspan = datePickerRowSpan
|
|
1613
|
+
break
|
|
1614
|
+
case '列相关':
|
|
1615
|
+
rowspan = colRowSpan
|
|
1616
|
+
break
|
|
1617
|
+
case '通用':
|
|
1618
|
+
rowspan = commonRowSpan
|
|
1619
|
+
break
|
|
1620
|
+
case '式样':
|
|
1621
|
+
rowspan = styleRowSpan
|
|
1622
|
+
break
|
|
1623
|
+
case '树形结构':
|
|
1624
|
+
rowspan = treeRowSpan
|
|
1625
|
+
break
|
|
1626
|
+
case '不常用':
|
|
1627
|
+
rowspan = noCommonRowSpan
|
|
1628
|
+
break
|
|
1629
|
+
case '事件':
|
|
1630
|
+
rowspan = eventRowSpan
|
|
1631
|
+
break
|
|
1632
|
+
case '回调':
|
|
1633
|
+
rowspan = rollbackRowSpan
|
|
1634
|
+
break
|
|
1635
|
+
case '请求数据':
|
|
1636
|
+
rowspan = getDataRowSpan
|
|
1637
|
+
break
|
|
1638
|
+
case '操作':
|
|
1639
|
+
rowspan = operateRowSpan
|
|
1640
|
+
break
|
|
1641
|
+
case '触发事件':
|
|
1642
|
+
rowspan = toggleRowSpan
|
|
1643
|
+
break
|
|
1644
|
+
case '其他':
|
|
1645
|
+
rowspan = otherRowSpan
|
|
1646
|
+
break
|
|
1647
|
+
}
|
|
1613
1648
|
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1649
|
+
return {
|
|
1650
|
+
rowspan: rowspan,
|
|
1651
|
+
colspan: colspan
|
|
1652
|
+
}
|
|
1653
|
+
}
|
|
1618
1654
|
}
|
|
1619
|
-
}
|
|
1620
1655
|
}
|
|
1621
1656
|
</script>
|
|
1622
1657
|
|
|
1623
1658
|
<style scoped>
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1659
|
+
.api-grid {
|
|
1660
|
+
display: flex;
|
|
1661
|
+
flex-flow: column;
|
|
1662
|
+
height: 100%;
|
|
1663
|
+
}
|
|
1629
1664
|
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1665
|
+
.api-grid-tab {
|
|
1666
|
+
height: 100%;
|
|
1667
|
+
}
|
|
1633
1668
|
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1669
|
+
.api-grid-tab-ctn {
|
|
1670
|
+
height: 100%;
|
|
1671
|
+
}
|
|
1637
1672
|
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1673
|
+
.api-grid-tab-ctn-header {
|
|
1674
|
+
margin-bottom: 15px;
|
|
1675
|
+
}
|
|
1641
1676
|
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1677
|
+
.api-grid-tab-ctn-table {
|
|
1678
|
+
overflow: auto
|
|
1679
|
+
}
|
|
1645
1680
|
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1681
|
+
.api-grid /deep/ .el-tabs__content {
|
|
1682
|
+
flex: 1;
|
|
1683
|
+
}
|
|
1649
1684
|
</style>
|