From 7d26ed0e19bf952e7c037b21bfd687759b46e851 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 25 六月 2024 19:21:33 +0800
Subject: [PATCH] 菜单更新
---
src/views/demo/table/RefTable.vue | 183 ++++++++++++++++++++-------------------------
1 files changed, 81 insertions(+), 102 deletions(-)
diff --git a/src/views/demo/table/RefTable.vue b/src/views/demo/table/RefTable.vue
index 784cd45..da0eb19 100644
--- a/src/views/demo/table/RefTable.vue
+++ b/src/views/demo/table/RefTable.vue
@@ -1,5 +1,5 @@
<template>
- <div class="p-4">
+ <div class="p-4 flex flex-col">
<div class="mb-4">
<a-button class="mr-2" @click="reloadTable"> 杩樺師 </a-button>
<a-button class="mr-2" @click="changeLoading"> 寮�鍚痩oading </a-button>
@@ -17,122 +17,101 @@
<a-button class="mr-2" @click="getPagination"> 鑾峰彇鍒嗛〉淇℃伅 </a-button>
</div>
<BasicTable
- :canResize="false"
+ :canResize="true"
title="RefTable绀轰緥"
titleHelpMessage="浣跨敤Ref璋冪敤琛ㄦ牸鍐呮柟娉�"
ref="tableRef"
- :api="api"
+ :api="demoListApi"
:columns="columns"
rowKey="id"
:rowSelection="{ type: 'checkbox' }"
+ showSelectionBar
/>
</div>
</template>
-<script lang="ts">
- import { defineComponent, ref, unref } from 'vue';
- import { BasicTable, TableActionType } from '/@/components/Table';
+<script lang="ts" setup>
+ import { ref, unref } from 'vue';
+ import { BasicTable, TableActionType } from '@/components/Table';
import { getBasicColumns, getBasicShortColumns } from './tableData';
- import { useMessage } from '/@/hooks/web/useMessage';
- import { demoListApi } from '/@/api/demo/table';
+ import { useMessage } from '@/hooks/web/useMessage';
+ import { demoListApi } from '@/api/demo/table';
+ import { type Nullable } from '@vben/types';
- export default defineComponent({
- components: { BasicTable },
- setup() {
- const tableRef = ref<Nullable<TableActionType>>(null);
- const { createMessage } = useMessage();
+ const tableRef = ref<Nullable<TableActionType>>(null);
+ const { createMessage } = useMessage();
- function getTableAction() {
- const tableAction = unref(tableRef);
- if (!tableAction) {
- throw new Error('tableAction is null');
- }
- return tableAction;
- }
- function changeLoading() {
- getTableAction().setLoading(true);
- setTimeout(() => {
- getTableAction().setLoading(false);
- }, 1000);
- }
- function changeColumns() {
- getTableAction().setProps({
- columns: getBasicShortColumns(),
- rowSelection: {
- type: 'checkbox',
- },
- showIndexColumn: true,
- });
- }
- function reloadTable() {
- getTableAction().setProps({
- columns: getBasicColumns(),
- rowSelection: {
- type: 'checkbox',
- },
- showIndexColumn: true,
- });
+ const columns = getBasicColumns();
- getTableAction().reload({
- page: 1,
- });
- }
- function getColumn() {
- createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
- console.log(getTableAction().getColumns());
- }
+ function getTableAction() {
+ const tableAction = unref(tableRef);
+ if (!tableAction) {
+ throw new Error('tableAction is null');
+ }
+ return tableAction;
+ }
+ function changeLoading() {
+ getTableAction().setLoading(true);
+ setTimeout(() => {
+ getTableAction().setLoading(false);
+ }, 1000);
+ }
+ function changeColumns() {
+ getTableAction().setProps({
+ columns: getBasicShortColumns(),
+ rowSelection: {
+ type: 'checkbox',
+ },
+ });
+ }
+ function reloadTable() {
+ getTableAction().setProps({
+ columns: getBasicColumns(),
+ rowSelection: {
+ type: 'checkbox',
+ },
+ });
- function getTableData() {
- createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
- console.log(getTableAction().getDataSource());
- }
- function getTableRawData() {
- createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
- console.log(getTableAction().getRawDataSource());
- }
+ getTableAction().reload({
+ page: 1,
+ });
+ }
+ function getColumn() {
+ createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
+ console.log(getTableAction().getColumns());
+ }
- function getPagination() {
- createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
- console.log(getTableAction().getPaginationRef());
- }
+ function getTableData() {
+ createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
+ console.log(getTableAction().getDataSource());
+ }
+ function getTableRawData() {
+ createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
+ console.log(getTableAction().getRawDataSource());
+ }
- function setPaginationInfo() {
- getTableAction().setPagination({
- current: 2,
- });
- getTableAction().reload();
- }
- function getSelectRowList() {
- createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
- console.log(getTableAction().getSelectRows());
- }
- function getSelectRowKeyList() {
- createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
- console.log(getTableAction().getSelectRowKeys());
- }
- function setSelectedRowKeyList() {
- getTableAction().setSelectedRowKeys(['0', '1', '2']);
- }
- function clearSelect() {
- getTableAction().clearSelectedRowKeys();
- }
+ function getPagination() {
+ createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
+ console.log(getTableAction().getPaginationRef());
+ }
- return {
- tableRef,
- api: demoListApi,
- columns: getBasicColumns(),
- changeLoading,
- changeColumns,
- reloadTable,
- getColumn,
- getTableData,
- getTableRawData,
- getPagination,
- setPaginationInfo,
- getSelectRowList,
- getSelectRowKeyList,
- setSelectedRowKeyList,
- clearSelect,
- };
- },
- });
+ function setPaginationInfo() {
+ getTableAction().setPagination({
+ current: 2,
+ });
+ getTableAction().reload();
+ }
+ function getSelectRowList() {
+ createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
+ console.log(getTableAction().getSelectRows());
+ }
+ function getSelectRowKeyList() {
+ createMessage.info('璇峰湪鎺у埗鍙版煡鐪嬶紒');
+ console.log(getTableAction().getSelectRowKeys());
+ }
+ function setSelectedRowKeyList() {
+ getTableAction().setSelectedRowKeys(['0', '1', '2']);
+ }
+ function clearSelect() {
+ getTableAction().clearSelectedRowKeys();
+ }
</script>
--
Gitblit v1.9.3