vue适用版本：npm i --save ant-design-vue

Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://1x.antdv.com/components/button-cn采用 React 封装的 Ant Design：npm install antd --save

组件总览 - Ant Designantd 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了社区精选组件作为必要的补充，另外如果您是内网用户，欢迎尝试使用 TechUI。https://ant.design/components/overview-cn/

vue2项目-引入antd：

前提必须安装过：npm install -g @vue/cli

创建vue项目：vue create +项目名，选择vue2进行创建

进入项目：cd+项目名

安装vue-router： npm install vue-router@3.5.3 --save

安装ant-design-vue： npm install ant-design-vue --save

在main.js文件中配置路由和antd：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
Vue.use(Antd)
Vue.use(router)
new Vue({
    el: '#app',
    render: h => h(App),
    router,
}).$mount('#app')

app.vue里引入router-view进行路由管理：

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>
<style>
</style>

在src文件夹下新建一个router文件夹，里面放一个index.js文件：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [{
            path: "/",
            name: "HelloWorld",
            component: () =>
                import('../components/HelloWorld.vue'),
            meta: {
                title: "主页",
            }
        }]
})
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}

vue2项目搭建layout案例：

<template>
  <a-layout id="components-layout-demo-top-side-2" style="min-height: 100vh;">
    <a-layout-header class="header">
      <div class="text">后台管理系统</div>
      <a-icon
        @click="toggleCollapse"
        :collapse="isCollapse"
        style="fontSize: 20px; color: #fff; margin: auto 20px;"
        type="unordered-list"
      />
      <a-menu
        theme="dark"
        v-for="mp in menus"
        :key="mp.path"
        mode="horizontal"
        :default-selected-keys="[$route.path]"
        :style="{ lineHeight: '64px' }"
        router
      >
        <a-menu-item
          v-if="!mp.children"
          :key="mp.path"
          @click="handleMenuClick(mp.path)"
          :data-path="mp.path"
        >
          {{ mp.name }}
        </a-menu-item>
      </a-menu>
      <a-icon
        style="
          fontSize: 45px;
          color: #fff;
          position: fixed;
          right: 30px;
          top: 8px;
        "
        type="user"
      />
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        :width="isCollapse ? '55px' : '200px'"
        style="background: #fff;"
      >
        <a-menu mode="inline" :default-selected-keys="[$route.path]">
          <template v-for="m in menus">
            <template v-if="!m.children">
              <a-menu-item
                :key="m.path"
                :to="m.path"
                :data-path="m.path"
                @click="handleMenuClick(m.path)"
              >
                <a-icon type="user" />
                {{ m.name }}
              </a-menu-item>
            </template>
            <template v-else>
              <a-sub-menu :key="m.path">
                <span slot="title">
                  <a-icon type="user" />
                  {{ m.name }}
                </span>
                <a-menu-item
                  v-for="mc in m.children"
                  :key="mc.path"
                  :to="mc.path"
                  :data-path="mc.path"
                  @click="handleMenuClick(mc.path)"
                >
                  <a-icon type="user" />
                  {{ mc.name }}
                </a-menu-item>
              </a-sub-menu>
            </template>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px;">
        <a-breadcrumb style="margin: 16px 0;">
          <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      isCollapse: false,
      menus: [
        {
          name: '首页',
          id: 0,
          path: '/sysMenu',
        },
        {
          name: '系统管理',
          id: 1,
          children: [
            {
              name: '系统配置',
              id: 3,
              path: '/sysSetting',
            },
            {
              name: '菜单管理',
              id: 4,
              path: '/4',
            },
          ],
        },
        {
          name: '用户管理',
          id: 2,
          children: [
            {
              name: '用户列表',
              id: 5,
              path: '/userList',
            },
          ],
        },
      ],
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    handleMenuClick(path) {
      console.log(path, 'path')
      if (path !== this.$route.path) {
        this.$router.push(path)
      }
    },
  },
}
</script>
<style scoped>
.ant-layout-header {
  display: flex;
  padding: 0;
}
.text {
  color: aliceblue;
  width: 170px;
  line-height: 33.99px;
  text-align: center;
  margin: 15px;
  background: rgb(24, 34, 77);
}
</style>

 vue3项目-引入antd： 

前提必须安装过：npm install -g @vue/cli

创建vue项目：vue create +项目名，选择vue3进行创建

进入项目：cd+项目名

安装vue-router： npm install vue-router --save

安装ant-design-vue： npm install ant-design-vue --save

在main.js中配置路由和组件：

import { createApp } from 'vue'
import App from './App.vue'
import router from'./router';
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
import * as Icons from '@ant-design/icons-vue'
const app = createApp(App)
app.use(router)
app.use(Antd)
app.mount('#app')
app.config.globalProperties.$icons = Icons
for (const key in Icons) {
    app.component(key, Icons[key])
}

 app.vue

<template>
  <router-view />
</template>
<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
</style>

在src文件夹下新建一个router文件夹，里面放一个index.js文件：

import { createRouter, createWebHashHistory} from "vue-router";
const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: '/',
            name: 'myLogin',
            component: () =>
                import ('../views/myLogin.vue')
        },
        {
            path: '/myHome',
            redirect: '/sysMenu',
            name: '首页',
            component: () =>
                import ('../views/myHome.vue'),
            children: [{
                    path: '/sysMenu',
                    name: '首页',
                    meta: { title: "首页" },
                    component: () =>
                        import ('../views/sysMenu.vue')
                },
                {
                    path: '/sysSetting',
                    name: '系统设置',
                    meta: { title: "系统管理/系统设置" },
                    component: () =>
                        import ('../views/sysSetting.vue')
                },
                {
                    path: '/userList',
                    name: '用户列表',
                    meta: { title: "用户列表" },
                    component: () =>
                        import ('../views/userList.vue')
                },
                {
                    path: '/myComponent',
                    name: 'vue3组件',
                    meta: { title: "vue3组件" },
                    component: () =>
                        import ('../views/myComponent.vue')
                }
            ]
        },

    ]
})
export default router

 vue3项目搭建layout案例：

<template>
  <a-layout id="components-layout-demo-top-side-2" style="min-height: 100vh;">
    <a-layout-header class="header">
      <div v-if="!isCollapse" class="text">后台管理系统</div>
      <component :is="$icons['BarsOutlined']" />
      <bars-outlined
        @click="toggleCollapse"
        :collapse="isCollapse"
        style="fontsize: 20px; color: #fff; margin: auto 20px;"
        type="unordered-list"
      />
      <a-menu
        theme="dark"
        v-for="m in staterow.menusrow"
        :key="m.id"
        mode="horizontal"
        :selectedKeys="[$route.path]"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item :key="m.path">
          <router-link :to="m.path" :key="m.path">{{ m.name }}</router-link>
        </a-menu-item>
      </a-menu>
      <component :is="$icons['UserOutlined']" />
      <user-outlined
        style="
          fontSize: 45px;
          color: #fff;
          position: fixed;
          right: 30px;
          top: 8px;
        "
        type="user"
      />
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        :width="isCollapse ? '55px' : '200px'"
        style="background: #fff; height: 100vh;"
      >
        <a-menu
          mode="inline"
          :selectedKeys="[$route.path]"
          v-for="m in state.menus"
          :key="m.path"
        >
          <a-menu-item v-if="!m.children" :key="m.path">
            <component :is="$icons['AppstoreOutlined']" />
            <span>{{ m.name }}</span>
            <router-link :to="m.path" :key="m.path"></router-link>
          </a-menu-item>
          <a-sub-menu v-if="m.children" :key="m.path">
            <template #title>
              <component :is="$icons['UserOutlined']" />
              <span>{{ m.name }}</span>
            </template>
            <a-menu-item v-for="mc in m.children" :key="mc.path">
              <component :is="$icons['FileDoneOutlined']" />
              <span>{{ mc.name }}</span>
              <router-link :to="mc.path" :key="mc.path"></router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px;">
        <a-breadcrumb style="margin: 16px 0;">
          <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
  setup() {
    const state = reactive({
      menus: [
        {
          name: '首页',
          id: 1,
          path: '/sysMenu',
        },
        {
          name: '系统管理',
          id: 2,
          children: [
            {
              name: '系统配置',
              id: 3,
              path: '/sysSetting',
            },
            {
              name: '菜单管理',
              id: 4,
              path: '/4',
            },
          ],
        },
      ],
    })
    const staterow = reactive({
      menusrow: [
        {
          name: '用户列表',
          id: 5,
          path: '/userList',
        },
        {
          name: 'vue3组件',
          id: 6,
          path: '/myComponent',
        },
      ],
    })
    const isCollapse = ref(false)
    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value
    }
    return {
      state,
      staterow,
      isCollapse,
      toggleCollapse,
    }
  },
}
</script>
<style scoped>
.ant-layout-header {
  display: flex;
  padding: 0;
}
.text {
  color: aliceblue;
  width: 170px;
  line-height: 33.99px;
  text-align: center;
  margin: 15px;
  background: rgb(24, 34, 77);
}
</style>

增删改查案例：

点击新增编辑显示表单,编辑页面拿到row数据，并且添加表单效验

vue2写法：

<template>
    <div>
        <div class="sousuo">
            <a-input style="width:400px" addonBefore="http://" defaultValue="mysite" />
            <a-button style="margin-right: 20px;" type="primary">搜索</a-button>
            <a-button type="primary" @click="addsyse('add')">新增</a-button>
        </div>
        <a-table :dataSource="dataSource" bordered :columns="columns">
            <template slot="action" slot-scope="text, record">
                <span>
                    <a href="javascript:" @click="addsyse('edit',record)"> 编辑 </a>
                    <a-divider type="vertical" />
                    <a href="javascript:" @click="addsyse('dele')"> 删除 </a>
                </span>
            </template>
        </a-table>
        <AddSyseting v-if="addcom" ref="sysetting" @refreshDataList="articleList"></AddSyseting>
    </div>
</template>
<script>
import AddSyseting from './addSyseting'
export default {
    name: 'sysSetting',
    components: {
        AddSyseting,
    },
    data() {
        return {
            addcom: false,
            dataSource: [
                {
                    key: 1,
                    name: 'John Brown sr.',
                    age: 60,
                    address: 'New York No. 1 Lake Park',
                    children: [
                        {
                            key: 11,
                            name: 'John Brown',
                            age: 42,
                            address: 'New York No. 2 Lake Park',
                        },
                        {
                            key: 12,
                            name: 'John Brown jr.',
                            age: 30,
                            address: 'New York No. 3 Lake Park',
                            children: [
                                {
                                    key: 121,
                                    name: 'Jimmy Brown',
                                    age: 16,
                                    address: 'New York No. 3 Lake Park',
                                },
                            ],
                        },
                        {
                            key: 13,
                            name: 'Jim Green sr.',
                            age: 72,
                            address: 'London No. 1 Lake Park',
                            children: [
                                {
                                    key: 131,
                                    name: 'Jim Green',
                                    age: 42,
                                    address: 'London No. 2 Lake Park',
                                    children: [
                                        {
                                            key: 1311,
                                            name: 'Jim Green jr.',
                                            age: 25,
                                            address: 'London No. 3 Lake Park',
                                        },
                                        {
                                            key: 1312,
                                            name: 'Jimmy Green sr.',
                                            age: 18,
                                            address: 'London No. 4 Lake Park',
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
                {
                    key: 2,
                    name: 'Joe Black',
                    age: 32,
                    address: 'Sydney No. 1 Lake Park',
                },
            ],

            columns: [
                {
                    title: 'Name',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: 'Age',
                    dataIndex: 'age',
                    key: 'age',
                    width: '12%',
                },
                {
                    title: 'Address',
                    dataIndex: 'address',
                    width: '30%',
                    key: 'address',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ]
        }
    },
    methods: {
        addsyse(type, item) {
            if (type == "add") {
                this.addcom = true;
                this.$nextTick(() => {
                    this.$refs.sysetting.init(type);
                });
            }
            if (type == "edit") {
                this.addcom = true;
                this.$nextTick(() => {
                    this.$refs.sysetting.init(type, item);
                });
            }
            if (type == "dele") {
                console.log("你点击了删除");
            }
        },
        articleList() {
            console.log("我是父组件传给子组件的方法");
        },
    }
}
</script>

<template>
    <div>
        <a-modal :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
            <a-form-model :labelCol="{ span:6 }" :style="{ maxWidth: 600 }" :wrapperCol="{ span: 16 }" :model="form" :rules="rulesRs" ref="ruleForm">
                <a-row>
                    <a-col>
                        <a-form-model-item label="输入框" prop="username">
                            <a-input v-model="form.username" placeholder="姓名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="多选框" prop="chebox" :autoLink="false">
                            <a-checkbox-group v-model="form.chebox" :options="options" @change="check"></a-checkbox-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="禁用">
                            <a-input disabled></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="开关" prop="checkedval">
                            <a-switch :checked="form.checkedval" @change="chaswitch"></a-switch>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="选择器" prop="ruselect">
                            <a-space>
                                <a-select style="width:300px" v-model="form.ruselect" @change="chaselect" :options="opselect" />
                            </a-space>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="单选" prop="radioval">
                            <a-radio-group @change="chaRadio" :value="form.radioval">
                                <a-radio value="1">A</a-radio>
                                <a-radio value="2">B</a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="树形" prop="treevalue">
                            <a-treeSelect showSearch :value="form.treevalue" bordered allowClear treeDefaultExpandAll @change="chatreeselect" :treeData="treeData" />
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="时间">
                            <a-calendar v-model="form.rucalendar" @change="chacalendar" />
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="上传">
                            <a-upload name="avatar" listType="picture-card" className="avatar-uploader" :showUploadList="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="chaUpload">
                                <img :src="form.imageUrl" style="width: '200px' " />
                            </a-upload>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'addsysSeting',
    data() {
        return {
            visible: false,
            type: "",
            title: "",
            form: {
                username: "",
                chebox: [],
                checkedval: null,
                radioval: "",
                treevalue: "",
                rucalendar: ""
            },
            rulesRs: {
                username: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'change'
                    }
                ],
                chebox: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                checkedval: [
                    {
                        required: true,
                        message: '请选择开关状态',
                        trigger: 'change'
                    }
                ],
                ruselect: [
                    {
                        required: true,
                        message: '请选择ruselect',
                        trigger: 'change'
                    }
                ],
                radioval: [
                    {
                        required: true,
                        message: '请选择单选radioval',
                        trigger: 'change'
                    }
                ],
                treevalue: [
                    {
                        required: true,
                        message: '请选择树选择',
                        trigger: 'change'
                    }
                ]
            },
            options: [
                { label: 'Apple', value: 'Apple' },
                { label: 'Pear', value: 'Pear' },
                { label: 'Orange', value: 'Orange' },
            ],
            opselect: [{ value: 'jack', label: 'Jack' },
            { value: 'lucy', label: 'Lucy' },
            { value: 'Yiminghe', label: 'yiminghe' },
            {                value: 'disabled', label: 'Disabled',
                disabled: true            },],
            treeData: [
                {
                    value: 'parent 1',
                    title: 'parent 1',
                    children: [
                        {
                            value: 'parent 1-0',
                            title: 'parent 1-0',
                            children: [
                                {
                                    value: 'leaf1',
                                    title: 'leaf1',
                                },
                                {
                                    value: 'leaf2',
                                    title: 'leaf2',
                                },
                            ],
                        },
                        {
                            value: 'parent 1-1',
                            title: 'parent 1-1',
                            children: [
                                {
                                    value: 'leaf3',
                                    title: <b style={{ color: '#08c' }}>leaf3</b>,
                                },
                            ],
                        },
                    ],
                },
            ],
        }
    },
    methods: {
        init(type, item) {
            this.visible = true;
            this.title = "新增"
            this.type = type;
            if (type == "edit") {
                this.title = "编辑"
                console.log(item, "item");
            }
        },
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (!valid) return false; // 校验未全部通过，结束当前提交
                if (valid) {
                    console.log(this.form, "校验全部通过提交给后端");
                }
            });
        },
        handleCancel() {
            console.log("点击了取消");
            this.visible = false;
        },
        check(e) {
            this.form.chebox = e
            console.log(this.form.chebox, "多选框选中的");
        },
        chaswitch(checked) {
            this.form.checkedval = checked
            console.log(this.form.checkedval, "开关选中的");
        },
        chaselect(e) {
            this.form.ruselect = e
            console.log(this.form.ruselect, "选择器选中的");
        },
        chaRadio(e) {
            this.form.radioval = e.target.value
            console.log(this.form.radioval, "单选选中的");
        },
        chatreeselect(e) {
            this.form.treevalue = e
            console.log(this.form.treevalue, "树选择选中的");
        },
        chacalendar(value) {
            this.form.rucalendar = value.format('YYYY-MM-DD')
            console.log(this.form.rucalendar, "选中的时间");
        },
        chaUpload(e) {
            this.form.imageUrl = e
            console.log(this.form.imageUrl, "上传照片");
        },
    }
}
</script>

vue3写法：

<template>
    <div class="sousuo">
        <a-input style="width:400px" addonBefore="http://" defaultValue="mysite" />
        <a-button style="margin-right: 20px;" type="primary">搜索</a-button>
        <a-button type="primary" @click="addsyse('add')">新增</a-button>
    </div>
    <AddSyseting v-if="addcom" ref="sysetting"></AddSyseting>
    <a-table :dataSource="dataSource" bordered :columns="columns">
        <template v-slot:bodyCell="{column,record}">
            <template v-if="column.dataIndex==='operation'">
                <span>
                    <a href="javascript:" @click="addsyse('edit',record)"> 编辑 </a>
                    <a-divider type="vertical" />
                    <a href="javascript:"> 删除 </a>
                </span>
            </template>
        </template>
    </a-table>
</template>
<script setup>
//ref函数创建响应式数据
//nextTick将回调推迟到下一个 DOM 更新周期之后执行
//onMounted()在组件被挂载完成后执行
//getCurrentInstance 获取到组件实例
import { ref, nextTick, onMounted, getCurrentInstance } from "vue";
import AddSyseting from "@/views/addSyseting.vue";
const addcom = ref(false);
let currentInstance = ''
onMounted(() => {
    currentInstance = getCurrentInstance()
})
const addsyse = (type, item) => {
    if (type == "add") {
        addcom.value = true;
        nextTick(() => {
            currentInstance.ctx.$refs.sysetting.alertMessage(type)
        })
    }
    if (type == "edit") {
        addcom.value = true;
        nextTick(() => {
            currentInstance.ctx.$refs.sysetting.alertMessage(type, item)
        })
    }
}
const dataSource = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
            {
                key: 11,
                name: 'John Brown',
                age: 42,
                address: 'New York No. 2 Lake Park',
            },
            {
                key: 12,
                name: 'John Brown jr.',
                age: 30,
                address: 'New York No. 3 Lake Park',
                children: [
                    {
                        key: 121,
                        name: 'Jimmy Brown',
                        age: 16,
                        address: 'New York No. 3 Lake Park',
                    },
                ],
            },
            {
                key: 13,
                name: 'Jim Green sr.',
                age: 72,
                address: 'London No. 1 Lake Park',
                children: [
                    {
                        key: 131,
                        name: 'Jim Green',
                        age: 42,
                        address: 'London No. 2 Lake Park',
                        children: [
                            {
                                key: 1311,
                                name: 'Jim Green jr.',
                                age: 25,
                                address: 'London No. 3 Lake Park',
                            },
                            {
                                key: 1312,
                                name: 'Jimmy Green sr.',
                                age: 18,
                                address: 'London No. 4 Lake Park',
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
    },
]

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: '12%',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        width: '30%',
        key: 'address',
    },
    {
        title: '操作',
        dataIndex: 'operation',
    }
]
</script>
<style scoped>
.sousuo {
  display: flex;
}
</style>

<template>
   <a-modal width="85%" :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <a-form ref="formRef" :model="form" :rules="rules" @keyup.enter="handleOk">
         <a-form-item label="输入框" name="username">
            <a-input v-model:value="form.username" size="middle" placeholder="姓名"></a-input>
         </a-form-item>
         <a-form-item label="多选框" name="rucheckbox">
            <a-checkbox-group v-model:value="form.rucheckbox" :options="options" @change="check"></a-checkbox-group>
         </a-form-item>
         <a-form-item label="禁用">
            <a-input disabled size="middle"></a-input>
         </a-form-item>
         <a-form-item label="开关" name="ruswitch">
            <a-switch :checked="form.ruswitch" @change="chaswitch"></a-switch>
         </a-form-item>
         <a-form-item label="选择器" name="ruselect">
            <a-space wrap>
               <a-select v-model:value="form.ruselect" style="width: 350px" @change="chaselect" :options="opselect" />
            </a-space>
         </a-form-item>
         <a-form-item label="单选" name="ruradio">
            <a-radio-group @change="chaRadio" :value="form.ruradio">
               <a-radio value="1">A</a-radio>
               <a-radio value="2">B</a-radio>
            </a-radio-group>
         </a-form-item>
         <a-form-item label="树选择" name="rutree">
            <a-treeSelect showSearch style="width: 350px;" :value="form.rutree" bordered allowClear treeDefaultExpandAll @change="chatreeselect" :treeData="treeData" />
         </a-form-item>
         <a-form-item label="日历">
            <a-calendar @change="chacalendar" />
         </a-form-item>
         <a-form-item label="上传" name="rupload">
            <a-upload name="avatar" listType="picture-card" className="avatar-uploader" :showUploadList="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="chaUpload">
               <img :src="form.rupload" style="width: '200px' " />
            </a-upload>
         </a-form-item>
      </a-form>
   </a-modal>
</template>
<script setup>
//ref函数创建响应式数据
//reactive创建响应式复杂数据
import { ref, reactive, defineExpose } from "vue";
const visible = ref(false);
const title = ref()
function data_form() {
   const form = reactive({
      username: undefined,
      rucheckbox: [],
      ruswitch: undefined,
      ruselect: [],
      ruradio: undefined,
      rutree: "",
      rupload: ""
   })
   return form
}
const form = data_form()
const rules = reactive({
   username: [
      {
         required: true,
         message: '请输入姓名',
         trigger: 'change'
      }
   ],
   rucheckbox: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   ruswitch: [
      {
         required: true,
         message: '请选择状态',
         trigger: 'change'
      }
   ],
   ruselect: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   ruradio: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   rutree: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   rupload: [
      {
         required: true,
         message: '请上传',
         trigger: 'change'
      }
   ],
})
const formRef = ref()
const alertMessage = (type, item) => {
   visible.value = true;
   title.value = "新增"
   if (type == "edit") {
      title.value = "编辑"
      console.log(item, "item");
   }
}
// 通过defineExpose向外暴露获取到父组件那边的alertMessage方法
defineExpose({
   alertMessage
})
function handleOk() {
   console.log("点击了确定");
   formRef.value.validate().then(() => {
      console.log(form, "需要提交给后端的form表单数据");
      visible.value = false;
   })
}
function handleCancel() {
   console.log("点击了取消");
   visible.value = false;
}
const options = [
   { label: 'Apple', value: 'Apple' },
   { label: 'Pear', value: 'Pear' },
   { label: 'Orange', value: 'Orange' },
];
const check = (e) => {
   form.rucheckbox = e
   console.log(form.rucheckbox, "多选框选中的");
}
const chaswitch = (checked) => {
   form.ruswitch = checked
   console.log(form.ruswitch, "开关状态");
}
const opselect = [{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
{   value: 'disabled', label: 'Disabled',
   disabled: true},]
const chaselect = (e) => {
   form.ruselect = e
   console.log(form.ruselect, "选择器选中的");
}
const chaRadio = (e) => {
   form.ruradio = e.target.value
   console.log(form.ruradio, "单选选中的");
}
const treeData = [
   {
      value: 'parent 1',
      title: 'parent 1',
      children: [
         {
            value: 'parent 1-0',
            title: 'parent 1-0',
            children: [
               {
                  value: 'leaf1',
                  title: 'leaf1',
               },
               {
                  value: 'leaf2',
                  title: 'leaf2',
               },
            ],
         },
         {
            value: 'parent 1-1',
            title: 'parent 1-1',
            children: [
               {
                  value: 'leaf3',
                  title: <b style={{ color: '#08c' }}>leaf3</b>,
               },
            ],
         },
      ],
   },
];
const chatreeselect = (e) => {
   form.rutree = e
   console.log(form.rutree, "树选择选中的");
}
const chacalendar = (value) => {
   console.log(value.format('YYYY-MM-DD'), "选中的时间");
}
const chaUpload = (e) => {
   form.rupload = e
   console.log(form.rupload, "上传照片");
}
</script>

vue3中效验也可以直接绑定在form-item标签中：

 <a-form-item label="绑定rules" name="name" :rules="[{required:true,message:'请输入姓名'}]">
            <a-input v-model:value="form.name" size="middle" placeholder="姓名"></a-input>
</a-form-item>