parent
572747de6c
commit
ff889860cc
2 changed files with 80 additions and 9 deletions
@ -0,0 +1,75 @@ |
|||||||
|
<template> |
||||||
|
<div class="p-4"> |
||||||
|
<BasicTable @register="registerTable" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script lang="ts"> |
||||||
|
import { defineComponent } from 'vue'; |
||||||
|
import { BasicColumn, BasicTable } from '/@/components/Table'; |
||||||
|
import { useListPage } from '/@/hooks/system/useListPage'; |
||||||
|
import { demoListApi } from '/@/api/demo/table'; |
||||||
|
|
||||||
|
//计算合并表头 |
||||||
|
export default defineComponent({ |
||||||
|
components: { BasicTable }, |
||||||
|
setup() { |
||||||
|
|
||||||
|
// 列表页面公共参数、方法 |
||||||
|
const { tableContext } = useListPage({ |
||||||
|
tableProps: { |
||||||
|
title: '分组表头示例', |
||||||
|
api: demoListApi, |
||||||
|
columns: getMergeHeaderColumns(), |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
//BasicTable绑定注册 |
||||||
|
const [registerTable] = tableContext; |
||||||
|
|
||||||
|
function getMergeHeaderColumns(): BasicColumn[] { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
title: 'ID', |
||||||
|
dataIndex: 'id', |
||||||
|
width: 300, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '姓名', |
||||||
|
dataIndex: 'name', |
||||||
|
width: 300, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '地址', |
||||||
|
width: 120, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
title: '地址', |
||||||
|
dataIndex: 'address', |
||||||
|
key: 'address', |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '编号', |
||||||
|
dataIndex: 'no', |
||||||
|
key: 'no', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '开始时间', |
||||||
|
dataIndex: 'beginTime', |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '结束时间', |
||||||
|
dataIndex: 'endTime', |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
]; |
||||||
|
} |
||||||
|
return { |
||||||
|
registerTable, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
Loading…
Reference in new issue