|
|
1
2
|
<template>
<div class="p-4">
|
vben
authored
|
3
|
<BasicTable @register="registerTable" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel">
|
|
|
4
5
6
7
8
|
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
|
vben
authored
|
9
10
|
import { BasicTable, useTable, BasicColumn, EditTableHeaderIcon } from '/@/components/Table';
import { optionsListApi } from '/@/api/demo/select';
|
|
|
11
12
13
14
|
import { demoListApi } from '/@/api/demo/table';
const columns: BasicColumn[] = [
{
|
vben
authored
|
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
title: '输入框',
dataIndex: 'name',
edit: true,
editComponentProps: {
prefix: '$',
},
width: 200,
},
{
title: '默认输入状态',
dataIndex: 'name7',
edit: true,
editable: true,
width: 200,
},
{
title: '输入框校验',
dataIndex: 'name1',
edit: true,
// 默认必填校验
editRule: true,
width: 200,
},
{
title: '输入框函数校验',
dataIndex: 'name2',
edit: true,
editRule: async (text) => {
if (text === '2') {
return '不能输入该值';
}
return '';
},
width: 200,
},
{
title: '数字输入框',
|
|
|
52
|
dataIndex: 'id',
|
vben
authored
|
53
54
55
56
|
edit: true,
editRule: true,
editComponent: 'InputNumber',
width: 200,
|
|
|
57
58
|
},
{
|
vben
authored
|
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
|
title: '下拉框',
dataIndex: 'name3',
edit: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'Option1',
value: '1',
},
{
label: 'Option2',
value: '2',
},
],
},
width: 200,
},
{
title: '远程下拉',
dataIndex: 'name4',
edit: true,
editComponent: 'ApiSelect',
editComponentProps: {
api: optionsListApi,
},
width: 200,
|
|
|
86
87
|
},
{
|
vben
authored
|
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
title: '勾选框',
dataIndex: 'name5',
edit: true,
editComponent: 'Checkbox',
editValueMap: (value) => {
return value ? '是' : '否';
},
width: 200,
},
{
title: '开关',
dataIndex: 'name6',
edit: true,
editComponent: 'Switch',
editValueMap: (value) => {
return value ? '开' : '关';
},
width: 200,
|
|
|
106
107
108
109
110
111
112
113
114
115
|
},
];
export default defineComponent({
components: { BasicTable, EditTableHeaderIcon },
setup() {
const [registerTable] = useTable({
title: '可编辑单元格示例',
api: demoListApi,
columns: columns,
showIndexColumn: false,
|
vben
authored
|
116
|
bordered: true,
|
|
|
117
118
|
});
|
vben
authored
|
119
120
121
122
123
124
125
126
|
function handleEditEnd({ record, index, key, value }: Recordable) {
console.log(record, index, key, value);
}
function handleEditCancel() {
console.log('cancel');
}
|
|
|
127
128
|
return {
registerTable,
|
vben
authored
|
129
130
|
handleEditEnd,
handleEditCancel,
|
|
|
131
132
133
134
|
};
},
});
</script>
|