Closed sunshineLixun closed 2 years ago
// main.[js|ts] import "@ant-design-vue/pro-form/dist/style.css"; // pro-form css or style.less
<template> <QueryFilter :model="formModel" @finish="handleSubmit" @collapsed="onCollapsed" > <FormItem name="name" label="应用名称" required> <Input v-model:value="formModel.name" placeholder="请输入" allow-clear /> </FormItem> <FormItem name="creater" label="创建人" required> <Input v-model:value="formModel.creater" placeholder="请输入" /> </FormItem> <FormItem name="sex" label="性别" required> <Select v-model:value="formModel.sex"> <SelectOption v-for="item in sex" :key="item.value" :value="item.value" >{{ item.label }}</SelectOption > </Select> </FormItem> <FormItem name="status" label="应用状态"> <Input v-model:value="formModel.status" placeholder="请输入" /> </FormItem> <FormItem name="startDate" label="响应日期"> <DatePicker v-model:value="formModel.startDate" placeholder="请输入" /> </FormItem> <FormItem name="create" label="创建时间"> <RangePicker v-model:value="formModel.create" :placeholder="['开始时间', '结束时间']" /> </FormItem> </QueryFilter> </template> <script lang="ts" setup> import { ref, reactive } from "vue"; import { QueryFilter } from "@ant-design-vue/pro-form"; import dayjs, { type Dayjs } from "dayjs"; import { FormItem, Input, Select, SelectOption, RangePicker, DatePicker, } from "ant-design-vue"; const formModel = reactive({ name: "123", creater: "11", sex: "男", status: "", startDate: "", create: [ dayjs("2015/01/01", "YYYY/MM/DD"), dayjs("2016/01/01", "YYYY/MM/DD"), ] as [Dayjs, Dayjs], }); const sex = ref([ { value: "男", label: "男", }, { value: "女", label: "女", }, ]); function handleSubmit(params: any) { console.log(params); } function onCollapsed(collapsed: boolean) { console.log(collapsed); } </script>
首先,感谢你的 PR,我会在 48 小时内测试并处理。
另外,想了解一下后续的情况,是否有考虑实现 Field 原子组件?
首先,感谢你的 PR,我会在 48 小时内测试并处理。 另外,想了解一下后续的情况,是否有考虑实现 Field 原子组件?
ProTable和 Field原子组件已经在做了, ProTable大概下周会提PR。