Ant-Design-Vue快速上手 指南+排坑（上）

Ant-Design-Vue快速上手指南+排坑

一、快速上手指南

1. 安装与配置

安装Ant Design Vue

Ant Design Vue 的安装非常简单，你可以通过 npm 来安装：

npm install ant-design-vue --save

引入样式文件

在项目中使用 Ant Design Vue 之前，需要引入其样式文件：

import 'ant-design-vue/dist/antd.css';

2. 使用组件

Ant Design Vue 提供了丰富的 Vue 组件，如按钮（Button）、表单（Form）、表格（Table）等。

按钮组件（Button）

使用 <a-button> 标签来创建按钮，并可以通过 type 属性设置按钮的样式（如 primary、ghost、dashed 等）：

	<template>
	<a-button type="primary">主要按钮</a-button>
	</template>

表单组件（Form）

使用 <a-form> 标签来创建表单，并通过 <a-form-item> 和 <a-input> 等组件来构建表单项：

	<template>
	<a-form @submit.prevent="handleSubmit">
	<a-form-item label="用户名">
	<a-input v-model="formData.username" />
	</a-form-item>
	<a-form-item>
	<a-button type="primary" html-type="submit">提交</a-button>
	</a-form-item>
	</a-form>
	</template>
	<script>
	export default {
	data() {
	return {
	formData: {
	username: '',
	},
	};
	},
	methods: {
	handleSubmit() {
	console.log(this.formData);
	},
	},
	};
	</script>

注意：虽然上述示例中使用了 v-model 进行双向绑定，但在 Ant Design Vue 的表单组件中，更推荐使用 v-decorator（在 Ant Design Vue 3.x 中已废弃，建议使用 Form.Item 的 name 属性和 Form 的 model 绑定）进行表单数据的绑定和校验。

表格组件（Table）

使用 <a-table> 组件来展示表格数据，并通过 columns 和 dataSource 属性来定义表格的列和数据源：

	<template>
	<a-table :columns="columns" :dataSource="data" />
	</template>
	<script>
	export default {
	data() {
	return {
	columns: [
	{ title: '姓名', dataIndex: 'name', key: 'name' },
	{ title: '年龄', dataIndex: 'age', key: 'age' },
	// 其他列定义...
	],
	data: [
	{ key: '1', name: '张三', age: 32 },
	{ key: '2', name: '李四', age: 42 },
	// 其他数据...
	],
	};
	},
	};
	</script>

二、排坑指南

1. 组件引入问题

确保正确引入 Ant Design Vue 的组件，避免出现打包时报错的问题。例如，正确引入 DatePicker 组件并使用其 RangePicker 子组件：

	import { DatePicker } from 'ant-design-vue';
	// 使用
	<DatePicker.RangePicker v-model:value="time" value-format="YYYY-MM-DD" />

2. 表格数据格式问题

如果后台返回的数据格式与 Ant Design Vue 表格组件所需的格式不一致，需要在前端进行转换。例如，修改分页参数等。

3. 样式覆盖问题

Ant Design Vue 的样式有时可能需要被覆盖，但直接使用 CSS 可能无法生效。此时，可以尝试使用深度选择器（如 /deep/）来覆盖样式：

	/deep/ .ant-table-thead .ant-table-cell {
	background-color: #dde9ff;
	font-weight: bold;
	}

注意：/deep/ 是 Vue 样式穿透的一个选项，具体使用哪种方式（如 ::v-deep、/deep/ 或 >>>）取决于你的项目配置和 Vue 版本。