|
|
1
2
|
<template>
<div class="p-4">
|
vben
authored
|
3
4
5
6
7
|
<BasicTable
@register="registerTable"
@edit-end="handleEditEnd"
@edit-cancel="handleEditCancel"
/>
|
|
|
8
9
10
11
|
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
|
vben
authored
|
12
|
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
vben
authored
|
13
|
import { optionsListApi } from '/@/api/demo/select';
|
|
|
14
15
16
17
|
import { demoListApi } from '/@/api/demo/table';
const columns: BasicColumn[] = [
{
|
vben
authored
|
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
52
53
54
|
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: '数字输入框',
|
|
|
55
|
dataIndex: 'id',
|
vben
authored
|
56
57
58
59
|
edit: true,
editRule: true,
editComponent: 'InputNumber',
width: 200,
|
|
|
60
61
|
},
{
|
vben
authored
|
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
|
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,
|
|
|
89
90
|
},
{
|
vben
authored
|
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
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,
|
|
|
109
110
111
|
},
];
export default defineComponent({
|
vben
authored
|
112
|
components: { BasicTable },
|
|
|
113
114
115
116
117
118
|
setup() {
const [registerTable] = useTable({
title: '可编辑单元格示例',
api: demoListApi,
columns: columns,
showIndexColumn: false,
|
vben
authored
|
119
|
bordered: true,
|
|
|
120
121
|
});
|
vben
authored
|
122
123
124
125
126
127
128
129
|
function handleEditEnd({ record, index, key, value }: Recordable) {
console.log(record, index, key, value);
}
function handleEditCancel() {
console.log('cancel');
}
|
|
|
130
131
|
return {
registerTable,
|
vben
authored
|
132
133
|
handleEditEnd,
handleEditCancel,
|
|
|
134
135
136
137
|
};
},
});
</script>
|