{"id":16440315,"url":"https://github.com/alfred-skyblue/v-form-antd","last_synced_at":"2025-07-13T07:34:35.652Z","repository":{"id":50619570,"uuid":"436480693","full_name":"Alfred-Skyblue/v-form-antd","owner":"Alfred-Skyblue","description":"基于ant-design-vue的可视化表单生成器","archived":false,"fork":false,"pushed_at":"2023-01-16T08:29:52.000Z","size":8442,"stargazers_count":146,"open_issues_count":3,"forks_count":32,"subscribers_count":5,"default_branch":"dev","last_synced_at":"2025-03-05T00:44:50.076Z","etag":null,"topics":["ant-design","form","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"https://alfred-skyblue.github.io/v-form-antd/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alfred-Skyblue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-09T04:21:34.000Z","updated_at":"2025-02-27T07:49:46.000Z","dependencies_parsed_at":"2023-02-10T02:01:45.158Z","dependency_job_id":null,"html_url":"https://github.com/Alfred-Skyblue/v-form-antd","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-form-antd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-form-antd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-form-antd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-form-antd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alfred-Skyblue","download_url":"https://codeload.github.com/Alfred-Skyblue/v-form-antd/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244047645,"owners_count":20389206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","form","typescript","vue","vue3"],"created_at":"2024-10-11T09:11:47.582Z","updated_at":"2025-03-17T14:15:45.107Z","avatar_url":"https://github.com/Alfred-Skyblue.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-form-antd\n\n[![MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/Alfred-Skyblue/v-form-antd)\n[![github](https://img.shields.io/badge/Author-Alfred_Skyblue-blue.svg)](https://github.com/Alfred-Skyblue)\n[![CompositionAPI](https://img.shields.io/badge/Composition-API-green.svg)](https://github.com/vuejs/composition-api)\n\n![](https://photos-1301289647.cos.ap-shanghai.myqcloud.com/github/custom-cmp.gif)\n\n\n## 简介\n本项目参考自[k-form-design](https://github.com/Kchengz/k-form-design)，支持自定义组件、表单联动等高级功能，使用 vue2 + CompositionAPI + ts 实现伪 vue3 应用\n\n+ [表单设计器](https://yuan_fangy.gitee.io/v-form-design/)\n+ [github](https://github.com/Alfred-Skyblue/v-form-antd)\n+ [码云](https://gitee.com/yuan_fangY/v-form-antd)\n+ [Document](https://alfred-skyblue.github.io/v-form-antd/)\n+ [国内文档地址](https://yuan_fangy.gitee.io/v-form-antd/)\n\n## 使用方法\n\n1. 安装\n```shell\nyarn add v-form-antd\n# or\nnpm install v-form-antd\n```\n\n2. 在vue中使用\n```javascript\n// main.js\nimport Vue from 'vue'\nimport VFormAntd from 'v-form-antd'\nimport 'v-form-antd/lib/index.css'\n\nVue.use(VFormAntd)\n```\n\n3. 使用表单设计器\n```vue\n\u003ctemplate\u003e\n  \u003cv-form-design title=\"v-form-antd-表单设计器\"/\u003e\n\u003c/template\u003e\n```\n\n4. 使用v-form-create渲染表单\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cv-form-create\n      :formConfig=\"formConfig\"\n      :formData=\"formData\"\n      v-model=\"fApi\"\n    /\u003e\n    \u003cbutton @click=\"submit\"\u003e提交\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      fApi:{},\n      formData:{},\n      formConfig: {\n        formItems: [\n          {\n            type: 'input',\n            label: '姓名',\n            field: 'name',\n            span: 12,\n            props: {\n              type: 'text'\n            }\n          },\n          {\n            type: 'number',\n            label: '年龄',\n            field: 'age',\n            span: 12,\n            props: {}\n          }\n        ],\n        config: {\n          layout: 'horizontal',\n          labelLayout: 'flex',\n          labelWidth: 100,\n          labelCol: {},\n          wrapperCol: {}\n        }\n      }\n    }\n  },\n  methods: {\n    async submit() {\n      const data = await this.fApi.submit()\n      console.log(data)\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfred-skyblue%2Fv-form-antd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfred-skyblue%2Fv-form-antd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfred-skyblue%2Fv-form-antd/lists"}