vben-admin基础使用form表单

在这里继续更新之前vben使用之后的分享，像之前表格这种基本的使用在这里就不加赘述了，简单的说说在项目中使用到的自己觉得资料比较少的部分，在这里主要说一下在表格中使用表单插槽，表单中的插槽按照官网效果我们轻松的就可以使用。

<template>
  <div class="m-4">
    <BasicForm @register="register">
      <template #customSlot="{ model, field }">
        <a-input v-model:value="model[field]" />
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'compatible-vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { BasicModal } from '@/components/modal/index';
  export default defineComponent({
    name: 'FormDemo',
    setup(props) {
      const [register] = useForm({
        labelWidth: 100,
        actionColOptions: {
          span: 24,
        },
        schemas: [
          {
            field: 'field1',
            label: '字段1',
            slot: 'customSlot',
          },
        ],
      });
      return {
        register,
      };
    },
  });
</script>

在下面之主要说一说表格嵌套使用from在使用插槽的注意点 在表格中嵌套主要就是通过在表格的基础上加一个form-自定义插槽名字就可以了

<template>
     <BasicTable @register="registerTable" >
         <template #form-inputName="{ model, field }">
            <a-input v-model:value="model[field]" />
          </template>
     </BasicTable>
</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: '请输入名称',
        },
  },
  {
    field: 'name',
    label: '名称：',
    solt: 'inputName'
  },
]
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>