Vue中使用ant-design-vue

第一步安装ant-design-vue：

 npm install ant-design-vue --save

第二步，在main.js引入：

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

第三步，在页面中使用：

<template>
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="Note">
            <a-input
                    v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
            />
        </a-form-item>
        <a-form-item label="Gender">
            <a-select
                    v-decorator="[
          'gender',
          { rules: [{ required: true, message: 'Please select your gender!' }] },
        ]"
                    placeholder="Select a option and change input text above"
                    @change="handleSelectChange"
            >
                <a-select-option value="male">
                    male
                </a-select-option>
                <a-select-option value="female">
                    female
                </a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit">
                Submit
            </a-button>
        </a-form-item>
    </a-form>
</template>

<script>
    export default {
        data() {
            return {
                formLayout: 'horizontal',
                form: this.$form.createForm(this, { name: 'coordinated' }),
            };
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleSelectChange(value) {
                console.log(value);
                this.form.setFieldsValue({
                    note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
                });
            },
        },
    };
</script>

效果图：