vben基础使用table

488 阅读1分钟
  1. table使用 简单的讲一讲我平时实在是用的啊,我一般是放在script标签中进行各种配置,在template里面一般很少放进行配置项的使用,例如
<template>
     <BasicTable @register="registerTable" />
</template>
<script setup lang='ts'>
import { BasicTable, useTable, FormSchema,BasicColumn } from '@/components/Table';
const basicColumns:BasicColumn[] = [
     {
        title: '名字',
        dataIndex: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
      },
]
const fromSchemas:FormSchema[] = [
    {
    field: 'name',
    component: 'Input',
    required: true,
    label: '名称:',
    componentProps: {
      placeholder: '请输入名称',
    },
  },
]
const [registerTable,
  {
    setTableData,
    setLoading,
    getPaginationRef,
    getForm,
    setPagination,
  },
] = useTable({
  canResize: true,
  showIndexColumn: false,
  columns: basicColumns,
  striped: true,
  bordered: true,
  //是否开启使用表单
  useSearchForm: true,
  //表单配置
  formConfig: {
    schemas: fromSchemas,
    autoSubmitOnEnter: true,
    submitOnReset: true,
    baseColProps: {
      span: 3,
    },
    //隐藏重置按钮
    showResetButton: false,
   //查询逻辑
    submitFunc: async () => {},
    //重置逻辑
     resetFunc: async () => {},
  },
</script>

当然了也可以将配置项直接放到BasicTable里面去使用,具体看个人,这里面配置项比较多建议参考官方案例去使用,vben.vvbin.cn 在这里我就不多说啦,因为这个表格的基础使用比较简单,难的是项目中面对的具体的业务逻辑实现。