Vben
6 years ago
28 changed files with 286 additions and 271 deletions
@ -0,0 +1,59 @@ |
|||
import type { ComputedRef, Ref } from 'vue'; |
|||
import type { BasicTableProps } from '../types/table'; |
|||
|
|||
import { computed, unref, ref, toRaw } from 'vue'; |
|||
import { ROW_KEY } from '../const'; |
|||
|
|||
export function useTableExpand( |
|||
propsRef: ComputedRef<BasicTableProps>, |
|||
tableData: Ref<Recordable[]>, |
|||
emit: EmitType |
|||
) { |
|||
const expandedRowKeys = ref<string[]>([]); |
|||
|
|||
const getAutoCreateKey = computed(() => { |
|||
return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey; |
|||
}); |
|||
|
|||
const getRowKey = computed(() => { |
|||
const { rowKey } = unref(propsRef); |
|||
return unref(getAutoCreateKey) ? ROW_KEY : rowKey; |
|||
}); |
|||
|
|||
const getExpandOption = computed(() => { |
|||
const { isTreeTable } = unref(propsRef); |
|||
if (!isTreeTable) return {}; |
|||
|
|||
return { |
|||
expandedRowKeys: unref(expandedRowKeys), |
|||
onExpandedRowsChange: (keys: string[]) => { |
|||
expandedRowKeys.value = keys; |
|||
emit('expanded-rows-change', keys); |
|||
}, |
|||
}; |
|||
}); |
|||
|
|||
function expandAll() { |
|||
const keys = getAllKeys(); |
|||
expandedRowKeys.value = keys; |
|||
} |
|||
|
|||
function getAllKeys(data?: Recordable[]) { |
|||
const keys: string[] = []; |
|||
const { childrenColumnName } = unref(propsRef); |
|||
toRaw(data || unref(tableData)).forEach((item) => { |
|||
keys.push(item[unref(getRowKey) as string]); |
|||
const children = item[childrenColumnName || 'children']; |
|||
if (children?.length) { |
|||
keys.push(...getAllKeys(children)); |
|||
} |
|||
}); |
|||
return keys; |
|||
} |
|||
|
|||
function collapseAll() { |
|||
expandedRowKeys.value = []; |
|||
} |
|||
|
|||
return { getExpandOption, expandAll, collapseAll }; |
|||
} |
|||
@ -1,107 +0,0 @@ |
|||
@border-color: #cecece4d; |
|||
|
|||
@prefix-cls: ~'@{namespace}-basic-table'; |
|||
|
|||
.@{prefix-cls} { |
|||
&-form-container { |
|||
padding: 16px; |
|||
|
|||
.ant-form { |
|||
padding: 12px 10px 6px 10px; |
|||
margin-bottom: 16px; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
// .ant-table-wrapper { |
|||
// border-radius: 2px; |
|||
// } |
|||
} |
|||
|
|||
&-row__striped { |
|||
td { |
|||
background: #fafafa; |
|||
} |
|||
} |
|||
|
|||
&--inset { |
|||
.ant-table-wrapper { |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
.ant-tag { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.ant-table-wrapper { |
|||
padding: 6px; |
|||
background: #fff; |
|||
border-radius: 2px; |
|||
|
|||
.ant-table-title { |
|||
padding: 0 0 8px 0 !important; |
|||
} |
|||
|
|||
.ant-table.ant-table-bordered .ant-table-title { |
|||
border: none !important; |
|||
} |
|||
} |
|||
|
|||
// |
|||
.ant-table { |
|||
width: 100%; |
|||
overflow-x: hidden; |
|||
// border: none; |
|||
|
|||
&-title { |
|||
display: flex; |
|||
padding: 8px 6px; |
|||
border-bottom: none; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
// .ant-table-thead > tr > th, |
|||
// .ant-table-header { |
|||
// background: #f1f3f4; |
|||
// background-color: #f1f3f4 !important; |
|||
// } |
|||
|
|||
.ant-table-tbody > tr.ant-table-row-selected td { |
|||
background: fade(@primary-color, 8%) !important; |
|||
} |
|||
} |
|||
|
|||
// .ant-table-tbody > tr > td, |
|||
// .ant-table-tbody > tr > th, |
|||
// .ant-table-thead > tr > td, |
|||
// .ant-table-thead > tr > th { |
|||
// white-space: pre; |
|||
// } |
|||
|
|||
.ant-pagination { |
|||
margin: 10px 0 0 0; |
|||
} |
|||
|
|||
.ant-table-footer { |
|||
padding: 0; |
|||
|
|||
.ant-table-wrapper { |
|||
padding: 0; |
|||
} |
|||
|
|||
table { |
|||
border: none !important; |
|||
} |
|||
|
|||
.ant-table-body { |
|||
overflow-x: hidden !important; |
|||
overflow-y: scroll !important; |
|||
} |
|||
|
|||
td { |
|||
padding: 12px 8px; |
|||
} |
|||
} |
|||
} |
|||
@ -1,29 +1,31 @@ |
|||
<template> |
|||
<div class="p-4"> |
|||
<BasicTable |
|||
:rowSelection="{ type: 'checkbox' }" |
|||
title="树形表格" |
|||
titleHelpMessage="树形组件不能和序列号列同时存在" |
|||
:columns="columns" |
|||
:dataSource="data" |
|||
rowKey="id" |
|||
:indentSize="20" |
|||
isTreeTable |
|||
/> |
|||
<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 } from '/@/components/Table'; |
|||
import { BasicTable, useTable } from '/@/components/Table'; |
|||
import { getBasicColumns, getTreeTableData } from './tableData'; |
|||
|
|||
export default defineComponent({ |
|||
components: { BasicTable }, |
|||
setup() { |
|||
return { |
|||
const [register, { expandAll, collapseAll }] = useTable({ |
|||
title: '树形表格', |
|||
isTreeTable: true, |
|||
rowSelection: { type: 'checkbox' }, |
|||
titleHelpMessage: '树形组件不能和序列号列同时存在', |
|||
columns: getBasicColumns(), |
|||
data: getTreeTableData(), |
|||
}; |
|||
dataSource: getTreeTableData(), |
|||
rowKey: 'id', |
|||
}); |
|||
return { register, expandAll, collapseAll }; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue