https://github.com/callmedadaxin/custom-form

后端可配表单，搭配element-ui
https://github.com/callmedadaxin/custom-form

Last synced: about 2 months ago
JSON representation

后端可配表单，搭配element-ui

• Host: GitHub
• URL: https://github.com/callmedadaxin/custom-form
• Owner: callmedadaxin
• Created: 2017-03-22T15:34:01.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-16T08:33:36.000Z (over 7 years ago)
• Last Synced: 2024-06-23T10:35:31.788Z (3 months ago)
• Language: JavaScript
• Size: 46.9 KB
• Stars: 42
• Watchers: 4
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-custom-form

> 根据字段，自动生成表单，表单内容依赖element-ui,支持表单验证

## demo

```

npm run example

```

## 安装

``` 

npm i element-ui -S

```

### 引用

```

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

//引用custom-form

import CustomForm from './scusorm-form/index.js'

Vue.use(ElementUI)

Vue.use(CustomForm)

```

### 使用

```

  

  

import CustomForm from 'custom-form';

export default {

  data () {

    return {

      formRule: {

        name: {

          type: 'input',

          label: '活动名称',

          placeholder: '请输入活动名称',

        },

        region: {

          type: 'select',

          label: '活动区域',

          placeholder: '请选择活动区域',

          options: [{

            label: '区域一',

            value: 'shanghai',

          },{

            label: '区域二',

            value: 'beijing'

          }]

        },

        delivery: {

          type: 'switch',

          label: '及时配送'

        },

        ...

      },

      data: {

        name: '',

        region: '',

        date: '',

        delivery: false,

        ...

      },

      rules: {

        name: [

          { required: true, message: '请输入活动名称', trigger: 'blur' },

          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

        ],

        region: [

          { required: true, message: '请选择活动区域', trigger: 'change' }

        ],

        ...

      }

    }

  }

}

```