|
|
|
@ -20,20 +20,48 @@
@@ -20,20 +20,48 @@
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!------------------------------------二次封装扩展-------------------------------------> |
|
|
|
|
<!--扩展table顶部插槽--> |
|
|
|
|
<div style="margin:-2px 0 -2px;padding-top: 5px;"> |
|
|
|
|
<slot name="tableTop"> |
|
|
|
|
<Alert v-if="openRowSelection!=null" |
|
|
|
|
type="info" |
|
|
|
|
show-icon |
|
|
|
|
class="alert" |
|
|
|
|
> |
|
|
|
|
<template #message> |
|
|
|
|
<template v-if="selectRowKeys.length > 0"> |
|
|
|
|
<span>已选中 {{ selectRowKeys.length }} 条记录(可跨页)</span> |
|
|
|
|
<Divider type="vertical"/> |
|
|
|
|
<a @click="setSelectedRowKeys([])">清空</a> |
|
|
|
|
<slot name="alertAfter"></slot> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<span>未选中任何数据</span> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
</Alert> |
|
|
|
|
</slot> |
|
|
|
|
</div> |
|
|
|
|
<!--扩展table顶部插槽--> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script lang="ts"> |
|
|
|
|
import type { TableSetting, ColumnChangeParam } from '../types/table'; |
|
|
|
|
import type { PropType } from 'vue'; |
|
|
|
|
import { defineComponent } from 'vue'; |
|
|
|
|
import { Divider } from 'ant-design-vue'; |
|
|
|
|
import { defineComponent, computed } from 'vue'; |
|
|
|
|
import { Divider, Alert } from 'ant-design-vue'; |
|
|
|
|
import TableSettingComponent from './settings/index.vue'; |
|
|
|
|
import TableTitle from './TableTitle.vue'; |
|
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
|
import { useTableContext } from '../hooks/useTableContext'; |
|
|
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
|
name: 'BasicTableHeader', |
|
|
|
|
components: { |
|
|
|
|
Alert, |
|
|
|
|
Divider, |
|
|
|
|
TableTitle, |
|
|
|
|
TableSetting: TableSettingComponent, |
|
|
|
@ -59,7 +87,18 @@
@@ -59,7 +87,18 @@
|
|
|
|
|
function handleColumnChange(data: ColumnChangeParam[]) { |
|
|
|
|
emit('columns-change', data); |
|
|
|
|
} |
|
|
|
|
return { prefixCls, handleColumnChange }; |
|
|
|
|
|
|
|
|
|
const { getSelectRowKeys, setSelectedRowKeys, getRowSelection } = useTableContext(); |
|
|
|
|
const selectRowKeys = computed(() => getSelectRowKeys()); |
|
|
|
|
const openRowSelection = computed(() => getRowSelection()); |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
prefixCls, |
|
|
|
|
handleColumnChange, |
|
|
|
|
selectRowKeys, |
|
|
|
|
setSelectedRowKeys, |
|
|
|
|
openRowSelection |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|