|
|
1
|
<template>
|
|
|
2
3
|
<div>
<a-card :borderd="false">
|
|
|
4
5
|
|
|
|
6
7
8
9
10
11
12
13
14
|
<a-button @click="handleTableCheck" type="primary">表单验证</a-button>
<span style="padding-left:8px;"></span>
<a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
<a-button @click="handleTableGet" type="primary">获取值</a-button>
</a-tooltip>
<span style="padding-left:8px;"></span>
<a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
<a-button @click="handleTableSet" type="primary">设置值</a-button>
</a-tooltip>
|
|
|
15
16
|
|
|
|
17
18
19
20
21
22
23
24
25
26
|
<j-editable-table
ref="editableTable"
:loading="loading"
:columns="columns"
:dataSource="dataSource"
:rowNumber="true"
:rowSelection="true"
:actionButton="true"
style="margin-top: 8px;"
@selectRowChange="handleSelectRowChange">
|
|
|
27
|
|
|
|
28
29
30
|
<template v-slot:action="props">
<a @click="handleDelete(props)">{{ props.text }}</a>
</template>
|
|
|
31
|
|
|
|
32
|
</j-editable-table>
|
|
|
33
|
|
|
|
34
|
|
|
|
35
36
37
38
39
40
41
42
43
44
45
46
47
|
</a-card>
<br>
<a-card title="只读列表">
<j-editable-table
:columns="columns1"
:dataSource="dataSource1"
:rowNumber="true"
:rowSelection="true"
:maxHeight="200"
:disabled="true"
/>
</a-card>
</div>
|
|
|
48
49
50
|
</template>
<script>
|
|
|
51
|
import moment from 'moment'
|
|
|
52
53
|
import JEditableTable from '@/components/jeecg/JEditableTable'
import { FormTypes } from '@/utils/JEditableTableUtil'
|
|
|
54
|
import { randomUUID, randomNumber } from '@/utils/util'
|
|
|
55
56
57
58
59
60
61
62
63
64
65
66
67
|
export default {
name: 'JeecgEditableTableExample',
components: {
JEditableTable
},
data() {
return {
loading: false,
columns: [
{
title: '字段名称',
key: 'dbFieldName',
|
|
|
68
69
|
// width: '19%',
width: '300px',
|
|
|
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
type: FormTypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [
{
required: true, // 必填
message: '请输入${title}' // 显示的文本
},
{
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
}
]
},
{
|
|
|
85
86
87
88
89
90
91
92
93
|
title: '文件域',
key: 'upload',
type: FormTypes.upload,
// width: '19%',
width: '300px',
placeholder: '点击上传',
token: true,
responseName: 'message',
action: window._CONFIG['domianURL'] + '/sys/common/upload'
|
|
|
94
95
96
97
|
},
{
title: '字段类型',
key: 'dbFieldType',
|
|
|
98
99
|
// width: '18%',
width: '300px',
|
|
|
100
101
102
103
104
105
106
|
type: FormTypes.select,
options: [ // 下拉选项
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
],
|
|
|
107
|
allowInput: true,
|
|
|
108
109
110
|
defaultValue: '',
placeholder: '请选择${title}',
validateRules: [{ required: true, message: '请选择${title}' }]
|
|
|
111
112
|
},
{
|
|
|
113
114
115
116
117
118
119
120
121
122
|
title: '性别（字典）',
key: 'sex_dict',
width: '300px',
type: FormTypes.select,
options: [],
dictCode: 'sex',
placeholder: '请选择${title}',
validateRules: [{ required: true, message: '请选择${title}' }]
},
{
|
|
|
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
title: '多选测试',
key: 'multipleSelect',
// width: '18%',
width: '300px',
type: FormTypes.select,
props: { 'mode': 'multiple' }, // 支持多选
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
],
defaultValue: ['int', 'boolean'], // 多个默认项
// defaultValue: 'string,double,int', // 也可使用这种方式
placeholder: '这里可以多选',
validateRules: [{ required: true, message: '请选择${title}' }]
|
|
|
139
140
141
142
|
},
{
title: '字段长度',
key: 'dbLength',
|
|
|
143
144
|
// width: '8%',
width: '100px',
|
|
|
145
146
147
148
149
150
|
type: FormTypes.inputNumber,
defaultValue: 32,
placeholder: '${title}',
validateRules: [{ required: true, message: '请输入${title}' }]
},
{
|
|
|
151
152
153
154
155
156
157
158
|
title: '日期',
key: 'datetime',
// width: '22%',
width: '320px',
type: FormTypes.datetime,
defaultValue: '2019-4-30 14:52:22',
placeholder: '请选择${title}',
validateRules: [{ required: true, message: '请选择${title}' }]
|
|
|
159
160
161
162
|
},
{
title: '可以为空',
key: 'isNull',
|
|
|
163
164
|
// width: '8%',
width: '100px',
|
|
|
165
166
167
|
type: FormTypes.checkbox,
customValue: ['Y', 'N'], // true ,false
defaultChecked: false
|
|
|
168
169
170
171
172
173
174
|
},
{
title: '操作',
key: 'action',
// width: '8%',
width: '100px',
type: FormTypes.slot,
|
|
|
175
176
|
slotName: 'action',
defaultValue: '删除'
|
|
|
177
178
179
180
|
}
],
dataSource: [],
|
|
|
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
selectedRowIds: [],
// table2
columns1: [
{
title: '输入框',
key: 'input',
type: FormTypes.input,
placeholder: '清输入'
},
{
title: '下拉框',
key: 'select',
type: FormTypes.select,
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
],
placeholder: '请选择'
},
{
title: '多选框',
key: 'checkbox',
type: FormTypes.checkbox,
customValue: [true, false]
},
{
title: '日期',
key: 'datetime',
type: FormTypes.datetime
}
],
dataSource1: []
|
|
|
215
216
217
218
219
220
221
|
}
},
created() {
},
mounted() {
this.randomData(23, false)
|
|
|
222
223
224
225
226
227
228
|
this.dataSource1 = [
{ input: 'hello', select: 'int', checkbox: true, datetime: '2019-6-17 14:50:48' },
{ input: 'world', select: 'string', checkbox: false, datetime: '2019-6-16 14:50:48' },
{ input: 'one', select: 'double', checkbox: true, datetime: '2019-6-17 15:50:48' },
{ input: 'two', select: 'boolean', checkbox: false, datetime: '2019-6-14 14:50:48' },
{ input: 'three', select: '', checkbox: false, datetime: '2019-6-13 14:50:48' }
]
|
|
|
229
230
231
232
233
234
235
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
262
263
264
265
266
|
},
methods: {
/** 表单验证 */
handleTableCheck() {
this.$refs.editableTable.getValues((error) => {
if (error === 0) {
this.$message.success('验证通过')
} else {
this.$message.error('验证未通过')
}
})
},
/** 获取值，忽略表单验证 */
handleTableGet() {
this.$refs.editableTable.getValues((error, values) => {
console.log('values:', values)
}, false)
console.log('deleteIds:', this.$refs.editableTable.getDeleteIds())
this.$message.info('获取值成功，请看控制台输出')
},
/** 模拟加载1000条数据 */
handleTableSet() {
this.randomData(1000, true)
},
handleSelectRowChange(selectedRowIds) {
this.selectedRowIds = selectedRowIds
},
/* 随机生成数据 */
randomData(size, loading = false) {
if (loading) {
this.loading = true
}
|
|
|
267
268
269
270
271
272
|
let randomDatetime = () => {
let time = parseInt(randomNumber(1000, 9999999999999))
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
}
let begin = Date.now()
|
|
|
273
274
275
276
277
|
let values = []
for (let i = 0; i < size; i++) {
values.push({
id: randomUUID(),
dbFieldName: `name_${i + 1}`,
|
|
|
278
279
|
// dbFieldTxt: randomString(10),
multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
|
|
|
280
281
|
dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
dbLength: randomNumber(0, 233),
|
|
|
282
|
datetime: randomDatetime(),
|
|
|
283
284
285
|
isNull: ['Y', 'N'][randomNumber(0, 1)]
})
}
|
|
|
286
|
|
|
|
287
|
this.dataSource = values
|
|
|
288
289
|
let end = Date.now()
let diff = end - begin
|
|
|
290
|
|
|
|
291
292
293
294
295
296
297
298
299
300
301
302
|
if (loading && diff < size) {
setTimeout(() => {
this.loading = false
}, size - diff)
}
},
handleDelete(props) {
let { rowId, target } = props
target.removeRows(rowId)
}
|
|
|
303
304
305
306
307
308
309
310
|
}
}
</script>
<style scoped>
</style>
|
