<script setup lang="ts">
|
import type { Recordable } from '@vben/types';
|
|
import { reactive, ref, watch } from 'vue';
|
|
import { $t } from '@vben/locales';
|
import { getVxePopupContainer } from '@vben/utils';
|
|
import { Popconfirm, Space } from 'ant-design-vue';
|
|
import { useVbenVxeGrid, type VxeGridProps, vxeSortEvent } from '#/adapter/vxe-table';
|
|
|
interface Props {
|
title?: string;
|
columns?: VxeGridProps['columns'];
|
data: any;
|
isUpdate?: boolean;
|
}
|
const props = defineProps<Props>();
|
|
const responsiveData = reactive(props.data);
|
defineExpose({
|
tableData
|
});
|
|
watch(
|
() => props.data,
|
(data) => {
|
responsiveData.splice(0, responsiveData.length, ...data);
|
}
|
);
|
|
const gridOptions: VxeGridProps = {
|
checkboxConfig: {
|
// 高亮
|
highlight: true,
|
// 翻页时保留选中状态
|
reserve: true
|
// 点击行选中
|
// trigger: 'row'
|
},
|
columns: props.columns,
|
height: 'auto',
|
keepSource: true,
|
data: responsiveData,
|
pagerConfig: {
|
enabled: false
|
},
|
toolbarConfig: {
|
enabled: false
|
},
|
rowConfig: {
|
isHover: true,
|
keyField: 'id'
|
},
|
sortConfig: {
|
// 远程排序
|
remote: true,
|
// 支持多字段排序 默认关闭
|
multiple: true
|
},
|
editConfig: {
|
mode: 'cell',
|
trigger: 'click'
|
},
|
id: 'local-table'
|
};
|
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
gridOptions,
|
gridEvents: {
|
sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams)
|
}
|
});
|
|
function handleDelete(row: Recordable<any>) {
|
const index = responsiveData.findIndex((item: any) => item.id === row.id);
|
if (index !== -1) {
|
responsiveData.splice(index, 1);
|
}
|
}
|
// 选中数据
|
function tableData() {
|
return tableApi.grid.getData();
|
}
|
|
|
/**
|
* TODO 后续扩展点击事件
|
*/
|
const slotName = ref<string>('equName');
|
</script>
|
|
<template>
|
<div class="w-full h-min">
|
<BasicTable :table-title="title" size="small">
|
<template #[slotName]="{ row }">
|
<Space>
|
<span>{{ row[slotName] }}</span>
|
</Space>
|
</template>
|
|
<template #action="{ row }">
|
<Space>
|
<Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确认删除？" @confirm="handleDelete(row)">
|
<ghost-button :disabled="isUpdate" danger @click.stop="">
|
{{ $t('pages.common.delete') }}
|
</ghost-button>
|
</Popconfirm>
|
</Space>
|
</template>
|
</BasicTable>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
:deep(.p-2) {
|
padding: 0;
|
}
|
</style>
|
