Vben Admin 自学记录 —— Table组件的基本使用及练习（持续更新中...）

<template>
  <div>
    <BasicTable
      @register="registerTable"
      :searchInfo="searchInfo"
      :beforeSearchSubmit="handleBeforeSearchSubmit"
    />
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable, TableAction, TableColumn } from '/@/components/Table';
 
export default defineComponent({
  components: { BasicTable },
  setup() {
    const searchInfo = ref({
      // 搜索表单的初始值
      name: '',
    });
 
    const [registerTable] = TableAction.useTableLogic({
      // 表格的逻辑注册
      api: () => {
        // 模拟的API请求函数
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              items: [
                // 模拟的数据列表
                { id: 1, name: 'John Doe' },
                { id: 2, name: 'Jane Doe' },
              ],
              total: 2,
            });
          }, 1000);
        });
      },
      columns: (): TableColumn[] => {
        // 定义表格列
        return [
          { title: 'ID', dataIndex: 'id', width: 100 },
          { title: 'Name', dataIndex: 'name' },
        ];
      },
    });
 
    function handleBeforeSearchSubmit(data) {
      // 在提交搜索前可以进行的操作
      console.log('Before search submit:', data);
      return data; // 返回处理后的数据
    }
 
    return {
      registerTable,
      searchInfo,
      handleBeforeSearchSubmit,
    };
  },
});
</script>

这个代码示例展示了如何在Vue组件中使用BasicTable组件。它定义了一个基本的表格，并通过模拟的API请求获取数据，同时展示了如何使用TableAction.useTableLogic进行表格的逻辑定义和数据加载。此外，它还演示了如何使用searchInfo进行搜索表单的初始值设定，以及如何使用handleBeforeSearchSubmit在提交搜索前处理数据。