|
1
|
<template>
|
|
2
3
|
<PageWrapper
title="可展开表格"
|
|
4
|
content="TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡,以便配合Table组件的expandRowByClick"
|
|
5
|
>
|
|
6
|
<BasicTable @register="registerTable">
|
|
7
8
9
|
<template #expandedRowRender="{ record }">
<span>No: {{ record.no }} </span>
</template>
|
|
10
|
<template #bodyCell="{ column, record }">
|
|
11
|
<template v-if="column.key === 'action'">
|
|
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<TableAction
stopButtonPropagation
:actions="[
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
},
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用?',
confirm: handleOpen.bind(null, record),
},
|
|
28
|
},
|
|
29
30
31
|
]"
/>
</template>
|
|
32
|
</template>
|
|
33
|
</BasicTable>
|
|
34
|
</PageWrapper>
|
|
35
36
37
|
</template>
<script lang="ts">
import { defineComponent } from 'vue';
|
|
38
39
|
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
|
|
40
41
42
43
44
|
import { getBasicColumns } from './tableData';
import { demoListApi } from '/@/api/demo/table';
export default defineComponent({
|
|
45
|
components: { BasicTable, TableAction, PageWrapper },
|
|
46
47
48
|
setup() {
const [registerTable] = useTable({
api: demoListApi,
|
|
49
50
|
title: '可展开表格演示',
titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
|
|
51
52
53
|
columns: getBasicColumns(),
rowKey: 'id',
canResize: false,
|
|
54
55
56
57
|
expandRowByClick: true,
actionColumn: {
width: 160,
title: 'Action',
|
|
58
|
dataIndex: 'action',
|
|
59
|
fixed: 'right',
|
|
60
|
// slots: { customRender: 'action' },
|
|
61
|
},
|
|
62
|
});
|
|
63
64
65
66
67
68
|
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
|
|
69
70
71
|
return {
registerTable,
|
|
72
73
|
handleDelete,
handleOpen,
|
|
74
75
76
77
|
};
},
});
</script>
|