You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.3 KiB
41 lines
1.3 KiB
<template> |
|
<div class="p-4"> |
|
<BasicTable @register="register"> |
|
<template #toolbar> |
|
<a-button type="primary" @click="expandAll">展开全部</a-button> |
|
<a-button type="primary" @click="collapseAll">折叠全部</a-button> |
|
</template> |
|
</BasicTable> |
|
</div> |
|
</template> |
|
<script lang="ts"> |
|
import { defineComponent } from 'vue'; |
|
import { BasicTable, useTable } from '/@/components/Table'; |
|
import { getBasicColumns, getTreeTableData } from './tableData'; |
|
|
|
export default defineComponent({ |
|
components: { BasicTable }, |
|
setup() { |
|
const [register, { expandAll, collapseAll }] = useTable({ |
|
title: '树形表格', |
|
isTreeTable: true, |
|
rowSelection: { |
|
type: 'checkbox', |
|
getCheckboxProps(record: Recordable) { |
|
// Demo: 第一行（id为0）的选择框禁用 |
|
if (record.id === '0') { |
|
return { disabled: true }; |
|
} else { |
|
return { disabled: false }; |
|
} |
|
}, |
|
}, |
|
titleHelpMessage: '树形组件不能和序列号列同时存在', |
|
columns: getBasicColumns(), |
|
dataSource: getTreeTableData(), |
|
rowKey: 'id', |
|
}); |
|
return { register, expandAll, collapseAll }; |
|
}, |
|
}); |
|
</script>
|
|
|