# AntDesignVue-components

**Repository Path**: OPU-FE/AntDesignVue-components

## Basic Information

- **Project Name**: AntDesignVue-components
- **Description**: 基于 Ant Design Vue 实现高度可配置的常用组件

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-01-17
- **Last Updated**: 2022-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ant-design-vue-dataTable

基于 Ant Design Vue 的 Form 表单组件进行封装，将复杂的表单渲染、验证、数据、控制等操作，变得只需要简单的配置一些参数就能获得。



#### 一、安装

```shell
npm install --save ant-design-vue-dataform
```
#### 二、引入
1、通过 Vue.use() 来全局注册组件
```javascript
import DataForm from "ant-design-vue-dataform";
Vue.use(DataForm);
```

2、单文件内容引入
```javascript
import { DataForm } from "ant-design-vue-dataform";
export default {
  components: {
    DataForm
  }
}
```

#### 二、使用
```html
<template>
    <data-form :content="content" @submit="handleSubmit"/>
</template>

<script>
import { DataForm } from "ant-design-vue-dataform";
export default {
  components: {
    DataForm
  },
  data() {
    return {
      content: [
        {
          label: "姓名",
          name: "name",
          option: {
            rules: [{ required: true, message: "Please input your name!" }]
          }
        },
        ...
      ]
    };
  },
  methods: {
    handleSubmit(values) {
      console.log(values);
    }
  }
};
</script>

```