Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alfred-skyblue/v-form-antd
基于ant-design-vue的可视化表单生成器
https://github.com/alfred-skyblue/v-form-antd
ant-design form typescript vue vue3
Last synced: 3 days ago
JSON representation
基于ant-design-vue的可视化表单生成器
- Host: GitHub
- URL: https://github.com/alfred-skyblue/v-form-antd
- Owner: Alfred-Skyblue
- License: mit
- Created: 2021-12-09T04:21:34.000Z (about 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-01-16T08:29:52.000Z (about 2 years ago)
- Last Synced: 2025-02-09T08:12:45.100Z (12 days ago)
- Topics: ant-design, form, typescript, vue, vue3
- Language: Vue
- Homepage: https://alfred-skyblue.github.io/v-form-antd/
- Size: 8.05 MB
- Stars: 146
- Watchers: 5
- Forks: 32
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-form-antd
[](https://github.com/Alfred-Skyblue/v-form-antd)
[](https://github.com/Alfred-Skyblue)
[](https://github.com/vuejs/composition-api)
## 简介
本项目参考自[k-form-design](https://github.com/Kchengz/k-form-design)，支持自定义组件、表单联动等高级功能，使用 vue2 + CompositionAPI + ts 实现伪 vue3 应用
+ [表单设计器](https://yuan_fangy.gitee.io/v-form-design/)
+ [github](https://github.com/Alfred-Skyblue/v-form-antd)
+ [码云](https://gitee.com/yuan_fangY/v-form-antd)
+ [Document](https://alfred-skyblue.github.io/v-form-antd/)
+ [国内文档地址](https://yuan_fangy.gitee.io/v-form-antd/)
## 使用方法
1. 安装
```shell
yarn add v-form-antd
# or
npm install v-form-antd
```
2. 在vue中使用
```javascript
// main.js
import Vue from 'vue'
import VFormAntd from 'v-form-antd'
import 'v-form-antd/lib/index.css'
Vue.use(VFormAntd)
```
3. 使用表单设计器
```vue
```
4. 使用v-form-create渲染表单
```vue
提交
export default {
data () {
return {
fApi:{},
formData:{},
formConfig: {
formItems: [
{
type: 'input',
label: '姓名',
field: 'name',
span: 12,
props: {
type: 'text'
}
},
{
type: 'number',
label: '年龄',
field: 'age',
span: 12,
props: {}
}
],
config: {
layout: 'horizontal',
labelLayout: 'flex',
labelWidth: 100,
labelCol: {},
wrapperCol: {}
}
}
}
},
methods: {
async submit() {
const data = await this.fApi.submit()
console.log(data)
}
}
}
```