5 changed files with 77 additions and 6 deletions
@ -0,0 +1,37 @@ |
|||||||
|
<script lang="ts" setup generic="T extends Recordable = Recordable"> |
||||||
|
import { ref } from 'vue' |
||||||
|
import { LoadingOutlined } from '@ant-design/icons-vue' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
expanded: boolean |
||||||
|
record: T |
||||||
|
onExpand: (record: any, e: MouseEvent) => void |
||||||
|
loadData: (record: T & { children?: T[] }) => Promise<void> |
||||||
|
}>() |
||||||
|
|
||||||
|
const loading = ref(false) |
||||||
|
function handleExpand(e: MouseEvent) { |
||||||
|
loading.value = true |
||||||
|
props.loadData(props.record) |
||||||
|
.then(() => { |
||||||
|
return props.onExpand(props.record, e) |
||||||
|
}) |
||||||
|
.catch(() => {}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<button |
||||||
|
v-if="!loading" |
||||||
|
class="ant-table-row-expand-icon" |
||||||
|
:class="[`ant-table-row-expand-icon-${expanded ? 'expanded' : 'collapsed'}`]" |
||||||
|
:aria-expanded="expanded" |
||||||
|
@click="(e) => handleExpand(e)" |
||||||
|
/> |
||||||
|
<span v-else class="float-left mr-9px inline-block w-16px"> |
||||||
|
<LoadingOutlined /> |
||||||
|
</span> |
||||||
|
</template> |
Loading…
Reference in new issue