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
|
},
];
export default defineComponent({
|
vben
authored
|
167
|
components: { BasicTable, TableAction },
|
vben
authored
|
168
|
setup() {
|
|
169
|
const { createMessage: msg } = useMessage();
|
vben
authored
|
170
171
172
|
const currentEditKeyRef = ref('');
const [registerTable] = useTable({
title: '可编辑行示例',
|
|
173
174
175
|
titleHelpMessage: [
'本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
],
|
vben
authored
|
176
177
178
|
api: demoListApi,
columns: columns,
showIndexColumn: false,
|
|
179
180
|
showTableSetting: true,
tableSetting: { fullScreen: true },
|
vben
authored
|
181
182
183
184
|
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
|
|
185
|
// slots: { customRender: 'action' },
|
vben
authored
|
186
187
188
189
190
|
},
});
function handleEdit(record: EditRecordRow) {
currentEditKeyRef.value = record.key;
|
vben
authored
|
191
|
record.onEdit?.(true);
|
vben
authored
|
192
193
194
195
|
}
function handleCancel(record: EditRecordRow) {
currentEditKeyRef.value = '';
|
vben
authored
|
196
|
record.onEdit?.(false, false);
|
vben
authored
|
197
198
|
}
|
vben
authored
|
199
|
async function handleSave(record: EditRecordRow) {
|
|
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
// 校验
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
|
220
|
}
|
vben
authored
|
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
|
}
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),
},
},
];
}
|
|
248
249
250
251
252
253
254
255
|
function onEditChange({ column, value, record }) {
// 本例
if (column.dataIndex === 'id') {
record.editValueRefs.name4.value = `${value}`;
}
console.log(column, value, record);
}
|
vben
authored
|
256
257
258
259
|
return {
registerTable,
handleEdit,
createActions,
|
|
260
|
onEditChange,
|
vben
authored
|
261
262
263
264
|
};
},
});
</script>
|