vben
authored
|
1
2
|
<template>
<div class="p-4">
|
|
3
|
<BasicTable @register="registerTable" @edit-change="onEditChange">
|
|
4
5
6
7
|
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="createActions(record, column)" />
</template>
|
vben
authored
|
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
</template>
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
BasicTable,
useTable,
TableAction,
BasicColumn,
ActionItem,
EditRecordRow,
} from '/@/components/Table';
|
vben
authored
|
22
|
import { optionsListApi } from '/@/api/demo/select';
|
vben
authored
|
23
24
|
import { demoListApi } from '/@/api/demo/table';
|
|
25
|
import { treeOptionsListApi } from '/@/api/demo/tree';
|
|
26
27
|
import { cloneDeep } from 'lodash-es';
import { useMessage } from '/@/hooks/web/useMessage';
|
|
28
|
|
vben
authored
|
29
30
|
const columns: BasicColumn[] = [
{
|
vben
authored
|
31
32
33
34
35
36
|
title: '输入框',
dataIndex: 'name',
editRow: true,
editComponentProps: {
prefix: '$',
},
|
|
37
|
width: 150,
|
vben
authored
|
38
39
40
41
42
|
},
{
title: '默认输入状态',
dataIndex: 'name7',
editRow: true,
|
|
43
|
width: 150,
|
vben
authored
|
44
45
46
47
48
|
},
{
title: '输入框校验',
dataIndex: 'name1',
editRow: true,
|
|
49
|
align: 'left',
|
vben
authored
|
50
51
|
// 默认必填校验
editRule: true,
|
|
52
|
width: 150,
|
vben
authored
|
53
54
55
56
57
|
},
{
title: '输入框函数校验',
dataIndex: 'name2',
editRow: true,
|
|
58
|
align: 'right',
|
vben
authored
|
59
60
61
62
63
64
65
66
67
|
editRule: async (text) => {
if (text === '2') {
return '不能输入该值';
}
return '';
},
},
{
title: '数字输入框',
|
vben
authored
|
68
|
dataIndex: 'id',
|
vben
authored
|
69
70
71
|
editRow: true,
editRule: true,
editComponent: 'InputNumber',
|
|
72
|
width: 150,
|
vben
authored
|
73
74
|
},
{
|
vben
authored
|
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
title: '下拉框',
dataIndex: 'name3',
editRow: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'Option1',
value: '1',
},
{
label: 'Option2',
value: '2',
},
|
|
89
90
91
92
|
{
label: 'Option3',
value: '3',
},
|
vben
authored
|
93
94
95
96
97
98
99
100
101
102
103
|
],
},
width: 200,
},
{
title: '远程下拉',
dataIndex: 'name4',
editRow: true,
editComponent: 'ApiSelect',
editComponentProps: {
api: optionsListApi,
|
|
104
105
106
|
resultField: 'list',
labelField: 'name',
valueField: 'id',
|
|
107
|
},
|
|
108
109
110
111
|
width: 200,
},
{
title: '远程下拉树',
|
|
112
|
dataIndex: 'name8',
|
|
113
114
115
116
117
118
|
editRow: true,
editComponent: 'ApiTreeSelect',
editRule: false,
editComponentProps: {
api: treeOptionsListApi,
resultField: 'list',
|
vben
authored
|
119
120
121
122
|
},
width: 200,
},
{
|
|
123
124
125
126
127
128
129
130
|
title: '日期选择',
dataIndex: 'date',
editRow: true,
editComponent: 'DatePicker',
editComponentProps: {
valueFormat: 'YYYY-MM-DD',
format: 'YYYY-MM-DD',
},
|
|
131
|
width: 150,
|
|
132
133
134
135
136
137
138
139
140
141
|
},
{
title: '时间选择',
dataIndex: 'time',
editRow: true,
editComponent: 'TimePicker',
editComponentProps: {
valueFormat: 'HH:mm',
format: 'HH:mm',
},
|
|
142
|
width: 100,
|
|
143
144
|
},
{
|
vben
authored
|
145
146
147
148
149
150
151
152
|
title: '勾选框',
dataIndex: 'name5',
editRow: true,
editComponent: 'Checkbox',
editValueMap: (value) => {
return value ? '是' : '否';
},
|
|
153
|
width: 100,
|
vben
authored
|
154
155
156
157
158
159
160
161
162
|
},
{
title: '开关',
dataIndex: 'name6',
editRow: true,
editComponent: 'Switch',
editValueMap: (value) => {
return value ? '开' : '关';
},
|
|
163
|
width: 100,
|
vben
authored
|
164
|
},
|
|
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
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
215
|
{
title: '单选框',
dataIndex: 'radio1',
editRow: true,
editComponent: 'RadioGroup',
editComponentProps: {
options: [
{
label: '选项1',
value: '1',
},
{
label: '选项2',
value: '2',
},
],
},
width: 200,
},
{
title: '单选按钮框',
dataIndex: 'radio2',
editRow: true,
editComponent: 'RadioButtonGroup',
editComponentProps: {
options: [
{
label: '选项1',
value: '1',
},
{
label: '选项2',
value: '2',
},
],
},
width: 200,
},
{
title: '远程单选框',
dataIndex: 'radio3',
editRow: true,
editComponent: 'ApiRadioGroup',
editComponentProps: {
api: optionsListApi,
resultField: 'list',
labelField: 'name',
valueField: 'id',
},
width: 200,
},
|
vben
authored
|
216
217
|
];
export default defineComponent({
|
vben
authored
|
218
|
components: { BasicTable, TableAction },
|
vben
authored
|
219
|
setup() {
|
|
220
|
const { createMessage: msg } = useMessage();
|
vben
authored
|
221
222
223
|
const currentEditKeyRef = ref('');
const [registerTable] = useTable({
title: '可编辑行示例',
|
|
224
225
226
|
titleHelpMessage: [
'本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
],
|
vben
authored
|
227
228
229
|
api: demoListApi,
columns: columns,
showIndexColumn: false,
|
|
230
231
|
showTableSetting: true,
tableSetting: { fullScreen: true },
|
vben
authored
|
232
233
234
235
|
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
|
|
236
|
// slots: { customRender: 'action' },
|
vben
authored
|
237
238
239
240
241
|
},
});
function handleEdit(record: EditRecordRow) {
currentEditKeyRef.value = record.key;
|
vben
authored
|
242
|
record.onEdit?.(true);
|
vben
authored
|
243
244
245
246
|
}
function handleCancel(record: EditRecordRow) {
currentEditKeyRef.value = '';
|
vben
authored
|
247
|
record.onEdit?.(false, false);
|
vben
authored
|
248
249
|
}
|
vben
authored
|
250
|
async function handleSave(record: EditRecordRow) {
|
|
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
|
// 校验
msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
const valid = await record.onValid?.();
if (valid) {
try {
const data = cloneDeep(record.editValueRefs);
console.log(data);
//TODO 此处将数据提交给服务器保存
// ...
// 保存之后提交编辑状态
const pass = await record.onEdit?.(false, true);
if (pass) {
currentEditKeyRef.value = '';
}
msg.success({ content: '数据已保存', key: 'saving' });
} catch (error) {
msg.error({ content: '保存失败', key: 'saving' });
}
} else {
msg.error({ content: '请填写正确的数据', key: 'saving' });
|
vben
authored
|
271
|
}
|
vben
authored
|
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
|
}
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
if (!record.editable) {
return [
{
label: '编辑',
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
onClick: handleEdit.bind(null, record),
},
];
}
return [
{
label: '保存',
onClick: handleSave.bind(null, record, column),
},
{
label: '取消',
popConfirm: {
title: '是否取消编辑',
confirm: handleCancel.bind(null, record, column),
},
},
];
}
|
|
299
300
301
302
303
304
305
306
|
function onEditChange({ column, value, record }) {
// 本例
if (column.dataIndex === 'id') {
record.editValueRefs.name4.value = `${value}`;
}
console.log(column, value, record);
}
|
vben
authored
|
307
308
309
310
|
return {
registerTable,
handleEdit,
createActions,
|
|
311
|
onEditChange,
|
vben
authored
|
312
313
314
315
|
};
},
});
</script>
|