当前位置：首页 > VUE

antd vue实现

2026-01-14 00:06:36VUE

以下是基于 Ant Design Vue（antd-vue）实现常见功能的整理方案，涵盖基础用法和关键配置：

安装与引入

通过 npm 或 yarn 安装依赖包：

npm install ant-design-vue@next
# 或
yarn add ant-design-vue@next

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

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

const app = createApp(App)
app.use(Antd)

表单控件示例

实现带验证的表单：

<template>
  <a-form :model="formState" @finish="onSubmit">
    <a-form-item label="用户名" name="username" :rules="[{ required: true }]">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password" :rules="[{ min: 6 }]">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-button type="primary" html-type="submit">提交</a-button>
  </a-form>
</template>

<script setup>
const formState = reactive({
  username: '',
  password: ''
})
const onSubmit = () => {
  console.log('Submitted values:', formState)
}
</script>

表格与分页

数据表格带分页功能：

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

<script setup>
const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' }
]
const data = ref([])
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

const fetchData = (params = {}) => {
  // 模拟API请求
  const mockData = Array(30).fill().map((_, i) => ({
    key: i,
    name: `用户 ${i}`,
    age: 20 + (i % 10)
  }))

  data.value = mockData.slice(
    (params.current - 1) * params.pageSize,
    params.current * params.pageSize
  )
  pagination.total = 30
}

const handleTableChange = (pag) => {
  pagination.current = pag.current
  fetchData({ ...pagination })
}

onMounted(() => fetchData(pagination))
</script>

主题定制

修改默认主题色（在 vite.config.js 中）：

import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: 'ant-design-vue',
          style: name => `ant-design-vue/es/${name}/style/css`
        }
      ]
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'border-radius-base': '4px'
        },
        javascriptEnabled: true
      }
    }
  }
})