dc6e9baec0
- 添加基于 VbenAdmin + Vue3 + Element Plus 的前端管理系统 - 包含完整的 UI 组件库和工具链 - 支持多应用架构 (web-ele, backend-mock, playground) - 包含完整的开发规范和配置 - 修复 admin 目录的子模块问题，确保正确提交
56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
|
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
|
|
import { getExampleTableApi } from '../mock-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', formatter: 'formatDateTime', title: 'Date' },
|
|
],
|
|
editConfig: {
|
|
mode: 'cell',
|
|
trigger: 'click',
|
|
},
|
|
pagerConfig: {},
|
|
proxyConfig: {
|
|
ajax: {
|
|
query: async ({ page }) => {
|
|
return await getExampleTableApi({
|
|
page: page.currentPage,
|
|
pageSize: page.pageSize,
|
|
});
|
|
},
|
|
},
|
|
},
|
|
showOverflow: true,
|
|
};
|
|
|
|
const [Grid] = useVbenVxeGrid({ gridOptions });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="vp-raw w-full">
|
|
<Grid />
|
|
</div>
|
|
</template>
|