4173264805
* chore: wip vxe-table * feat: add table demo * chore: follow ci recommendations to adjust details * chore: add custom-cell demo * feat: add custom-cell table demo * feat: add table from demo
95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
||
import type { VxeGridProps } from '#/adapter';
|
||
|
||
import { Page } from '@vben/common-ui';
|
||
|
||
import { Button, message } from 'ant-design-vue';
|
||
|
||
import { useVbenVxeGrid } from '#/adapter';
|
||
import { getExampleTableApi } from '#/api';
|
||
|
||
interface RowType {
|
||
category: string;
|
||
color: string;
|
||
id: string;
|
||
price: string;
|
||
productName: string;
|
||
releaseDate: string;
|
||
}
|
||
|
||
const gridOptions: VxeGridProps<RowType> = {
|
||
columns: [
|
||
{ title: '序号', type: 'seq', width: 50 },
|
||
{ editRender: { name: 'input' }, field: 'category', title: 'Category' },
|
||
{ editRender: { name: 'input' }, field: 'color', title: 'Color' },
|
||
{
|
||
editRender: { name: 'input' },
|
||
field: 'productName',
|
||
title: 'Product Name',
|
||
},
|
||
{ field: 'price', title: 'Price' },
|
||
{ field: 'releaseDate', title: 'Date' },
|
||
{ slots: { default: 'action' }, title: '操作' },
|
||
],
|
||
editConfig: {
|
||
mode: 'row',
|
||
trigger: 'click',
|
||
},
|
||
height: 'auto',
|
||
pagerConfig: {},
|
||
proxyConfig: {
|
||
ajax: {
|
||
query: async ({ page }) => {
|
||
return await getExampleTableApi({
|
||
page: page.currentPage,
|
||
pageSize: page.pageSize,
|
||
});
|
||
},
|
||
},
|
||
},
|
||
showOverflow: true,
|
||
};
|
||
|
||
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
|
||
|
||
function hasEditStatus(row: RowType) {
|
||
return gridApi.grid?.isEditByRow(row);
|
||
}
|
||
|
||
function editRowEvent(row: RowType) {
|
||
gridApi.grid?.setEditRow(row);
|
||
}
|
||
|
||
async function saveRowEvent(row: RowType) {
|
||
await gridApi.grid?.clearEdit();
|
||
|
||
gridApi.setLoading(true);
|
||
setTimeout(() => {
|
||
gridApi.setLoading(false);
|
||
message.success({
|
||
content: `保存成功！category=${row.category}`,
|
||
});
|
||
}, 600);
|
||
}
|
||
|
||
const cancelRowEvent = (_row: RowType) => {
|
||
gridApi.grid?.clearEdit();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Page auto-content-height>
|
||
<Grid>
|
||
<template #action="{ row }">
|
||
<template v-if="hasEditStatus(row)">
|
||
<Button type="link" @click="saveRowEvent(row)">保存</Button>
|
||
<Button type="link" @click="cancelRowEvent(row)">取消</Button>
|
||
</template>
|
||
<template v-else>
|
||
<Button type="link" @click="editRowEvent(row)">编辑</Button>
|
||
</template>
|
||
</template>
|
||
</Grid>
|
||
</Page>
|
||
</template>
|