- 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 在这里我就不多说啦,因为这个表格的基础使用比较简单,难的是项目中面对的具体的业务逻辑实现。