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 版本。