admin-vben5/playground/src/views/examples/vxe-table/basic.vue

94 lines
2.5 KiB
Vue
Raw Normal View History

<script lang="ts" setup>
import type { VxeGridListeners, VxeGridProps } from '#/adapter';
import { Page } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter';
import DocButton from '../doc-button.vue';
import { MOCK_TABLE_DATA } from './table-data';
interface RowType {
address: string;
age: number;
id: number;
name: string;
nickname: string;
role: string;
}
const gridOptions: VxeGridProps<RowType> = {
columns: [
{ title: '序号', type: 'seq', width: 50 },
{ field: 'name', title: 'Name' },
{ field: 'age', sortable: true, title: 'Age' },
{ field: 'nickname', title: 'Nickname' },
{ field: 'role', title: 'Role' },
{ field: 'address', showOverflow: true, title: 'Address' },
],
data: MOCK_TABLE_DATA,
sortConfig: {
multiple: true,
},
};
const gridEvents: VxeGridListeners<RowType> = {
cellClick: ({ row }) => {
message.info(`cell-click: ${row.name}`);
},
};
const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions });
const showBorder = gridApi.useStore((state) => state.gridOptions?.border);
const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe);
function changeBorder() {
gridApi.setGridOptions({
border: !showBorder.value,
});
}
function changeStripe() {
gridApi.setGridOptions({
stripe: !showStripe.value,
});
}
function changeLoading() {
gridApi.setLoading(true);
setTimeout(() => {
gridApi.setLoading(false);
}, 2000);
}
</script>
<template>
<Page
description="表格组件常用于快速开发数据展示与交互界面示例数据为静态数据。该组件是对vxe-table进行简单的二次封装大部分属性与方法与vxe-table保持一致。"
title="表格基础示例"
>
<template #extra>
<DocButton path="/components/common-ui/vben-vxe-table" />
</template>
<Grid>
<template #toolbar-actions>
chore(deps): bump the non-breaking-changes group with 3 updates (#4561) * chore(deps): bump the non-breaking-changes group with 3 updates Bumps the non-breaking-changes group with 3 updates: [@changesets/cli](https://github.com/changesets/changesets), [vue](https://github.com/vuejs/core) and [@vue/shared](https://github.com/vuejs/core/tree/HEAD/packages/shared). Updates `@changesets/cli` from 2.27.8 to 2.27.9 - [Release notes](https://github.com/changesets/changesets/releases) - [Changelog](https://github.com/changesets/changesets/blob/main/docs/modifying-changelog-format.md) - [Commits](https://github.com/changesets/changesets/compare/@changesets/cli@2.27.8...@changesets/cli@2.27.9) Updates `vue` from 3.5.10 to 3.5.11 - [Release notes](https://github.com/vuejs/core/releases) - [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md) - [Commits](https://github.com/vuejs/core/compare/v3.5.10...v3.5.11) Updates `@vue/shared` from 3.5.10 to 3.5.11 - [Release notes](https://github.com/vuejs/core/releases) - [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md) - [Commits](https://github.com/vuejs/core/commits/v3.5.11/packages/shared) --- updated-dependencies: - dependency-name: "@changesets/cli" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: non-breaking-changes - dependency-name: vue dependency-type: direct:production update-type: version-update:semver-patch dependency-group: non-breaking-changes - dependency-name: "@vue/shared" dependency-type: direct:production update-type: version-update:semver-patch dependency-group: non-breaking-changes ... Signed-off-by: dependabot[bot] <support@github.com> * chore: update deps --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-10-05 09:52:04 +08:00
<Button class="mr-2" type="primary">左侧插槽</Button>
</template>
<template #toolbar-tools>
<Button class="mr-2" type="primary" @click="changeBorder">
{{ showBorder ? '隐藏' : '显示' }}边框
</Button>
<Button class="mr-2" type="primary" @click="changeLoading">
显示loading
</Button>
<Button class="mr-2" type="primary" @click="changeStripe">
{{ showStripe ? '隐藏' : '显示' }}斑马纹
</Button>
</template>
</Grid>
</Page>
</template>