当前位置：首页 > VUE

antd vue 实现

2026-01-12 11:22:27VUE

以下是基于 Ant Design Vue 实现常见功能的整理，涵盖组件使用、表单处理、表格集成等核心场景：

安装与基础配置

确保项目已配置 Vue 3 环境，通过以下命令安装 Ant Design Vue：

npm install ant-design-vue@next

在 main.js 中全局引入样式和组件：

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.vue';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

表单控件实现

使用 a-form 和 a-form-item 构建带验证的表单：

<template>
  <a-form :model="formState" @finish="handleSubmit">
    <a-form-item 
      label="用户名" 
      name="username"
      :rules="[{ required: true, message: '请输入用户名' }]">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue';
const formState = reactive({ username: '' });
const handleSubmit = () => {
  console.log('表单数据:', formState);
};
</script>

表格与分页

集成 a-table 并绑定分页逻辑：

<template>
  <a-table 
    :columns="columns" 
    :data-source="data" 
    :pagination="pagination"
    @change="handleTableChange">
  </a-table>
</template>

<script setup>
import { ref } from 'vue';
const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' }
];
const data = ref([
  { key: '1', name: '张三', age: 30 },
  { key: '2', name: '李四', age: 25 }
]);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 50
});
const handleTableChange = (pag) => {
  pagination.value.current = pag.current;
  // 此处调用API加载新数据
};
</script>

模态框与交互

通过 a-modal 实现动态弹窗：

<template>
  <a-button @click="showModal">打开弹窗</a-button>
  <a-modal 
    v-model:visible="visible" 
    title="标题" 
    @ok="handleOk">
    <p>弹窗内容...</p>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
const visible = ref(false);
const showModal = () => { visible.value = true; };
const handleOk = () => { visible.value = false; };
</script>

主题定制

在 vue.config.js 中通过 less-loader 修改主题色：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: { '@primary-color': '#1DA57A' },
          javascriptEnabled: true
        }
      }
    }
  }
};