所有组件
<a-button></a-button> 按钮组件
<a-icon type="exclamation" /> icon图标
<a-row></a-row>
<a-col></a-col>
Grid删格组件
<a-layout></a-layout> layout布局组件
<a-space></a-space> space间距组件
<a-affix></a-affix> Affix固钉组件
<a-breadcrumb></a-breadcrumb> Breadcrumb面包屑组件
<a-dropdown></a-dropdown> Dropdown下拉菜单组件
<a-menu></a-menu> Menu导般菜单组件
<a-page-header></a-page-header> PageHeader页头组件
<a-pagination></a-pagination> Pagination分页组件
<a-steps></a-steps> Step步骤条组件
<a-auto-complete></a-auto-complete> AutoComplete自动完成组件
<a-cascader></a-cascader> Cascader级联组件
<a-checkbox-group></a-checkbox-group> Checkbox多选框组件
<a-date-picker></a-date-picker> 日期选择组件
<a-form></a-form> Form表单组件
<a-form-model></a-form-model> FormModel表单
<a-input></a-input> Input输入框组件
<a-input-number></a-input-number> InputNumber数字输入框组件
<a-mentiions></a-mentiions> 提及组件
<a-radio-group></a-radio-group> Radio单选框组件
<a-rate></a-rate> Rate评分组件
<a-select></a-select> Select选择器组件
<a-slider></a-slider> 滑动输入条组件
<a-switch></a-switch> Switch开关组件
<a-time-picker></a-time-picker> TimePicker时间选择框
<a-transfer></a-transfer>穿梭框组件
<a-tree-select></a-tree-select> TreeSelect树选择组件
<a-upload></a-upload> 文件上传控件
<a-avatar></a-avatar> 头象组件
<a-badge></a-badge> 在图形上显示数字控件
<a-calendar></a-calendar> Calendar日历组件
<a-card></a-card> 卡片组件
<a-carousel></a-carousel> 走马灯组件
<a-collapse></a-collapse> 折叠面板组件
<a-comment></a-comment> Comment评论组件
<a-descriptions></a-descriptions> 描述列表组件
<a-empty/> Empty空状态
<a-list></a-list> List列表展示
<a-popover></a-popover> 所泡卡片展示组件
<a-statistic></a-statistic> 显示统计数值组件
<a-table></a-table> Table表格组件
<a-tabs></a-tabs> 标签页组件
<a-tag></a-tag> 打tag标签组件
<a-timeline></a-timeline> 时间轴组件
<a-tooltip></a-tooltip> 文字提示气泡框
<a-tree></a-tree> 树形控件
<a-alert> </a-alert> 警告窗口
<a-drawer></a-drawer> 抽屉窗口显示
this.$message.info(“”) Message全局提示
<a-modal></a-modal> Modal对话框
this.$notification.open({}) 通知醒框
<a-popconfirm></a-popconfirm> 气泡确认框
<a-progress></a-progress> 进度条
<a-result></a-result> 结果提示框
<a-skeleton></a-skeleton> 骨架屏，显示时占位用
<a-spin></a-spin> 加载中
<a-anchor></a-anchor> 锚点
<a-back-top /> 回到顶部
<a-config-provider></a-config-provider> 全局化配置
<a-divider></a-divider> 分割线
<a-locale-provider></a-locale-provider> 国际化组件
table组件的使用
基础使用
ref：定义父组件访问子组件的名称
bordered: 是否有边框
rowKey: 表格行key的取值，可以是字符串或一个函数
columns: 定义的列，为一个特定格式的对象:
{
title: ‘’,
align: ‘center’,
dataIndex: ‘userName’，
fixed: ‘left’,
width:200
}
如果一列需要显示（字符类）变换，由可以定义customRender属性，返回的是一个函数
function(text,record,index) {
}
如果一列需要转成图片等，也可以用scopedSlots转换成具名插槽的形式,如:
scopedSlots: {
customRender: ‘具名插槽名称’
}
text,record,index : 作为作用域插槽可以公布的对象。
分页
pagintion: object
{
current:number //当前页数
pageSize: number //每页条数
pageSizeOptions:string[] //指定每页可以显示多少条
ShowQuickJumper:boolean 是否可以快速跳转某页
ShowTotal:function(total,range)//显示数据总量和当前数据顺序。
total:number //数据总数
}
rowSelection
代表列表项是否可选择
最主要两个选项:
{
selectedRowKeys:string[] //指定选中项的key,需要和onChange进行配合。
onChange:Function(selectedRowKeys, selectedRows) //选中项发生变化时的回调。
}
onChange
分页、排序、筛选变化时触发
Function(pagination, filters, sorter, { currentDataSource })
modal对话框
<a-model :width="窗口宽度", :visible = "是否显示", :confirmLoading = "点击确定按钮是否显示loading效果", :okButtonProps = "" //确定按钮根据设置显示与不显示 @ok = "handleSubmit" //function(e) 点击确定回调 @cancel = "cancelHandler" //function(e) 点击遮罩层或右上角叉或取消按钮的回调 >
</a-model>
okButtonProps
{props: ButtonProps, on: {}}
Form表单
表单布局
表单一定会包含表单域，表单域的表达是：<form.item/>
表单域可以设置如下的栅格布局属性：
labelCol:object — lable标签布局
wrapperCol:object —输入控件设置布局样式
表单校验 v-decorator指令
decorator: 装饰器
作用：校验与绑定数据的用法
一个讲解v-decorator非常详细的教程:
ant design vue 之 v-decorator_dengfenglai825的博客-CSDN博客
关于表单一个非常好的教程:
关于vue v-decorator - 简书
validatorRules: {username: {rules: [{//必填校验required:true,message:'请输入用户账号。'}，{//自定义校验validator: this.validateUserName,}]}}validateUserName(rule,value,callback){}
注意：
提交事件校验字段:
this.form.validateFields((err,values)=>{})
form
form: this.$form.createForm(this)
相当于创建了Form这样一个对象
this.form.resetFields() //表单重置
loadsh.pick;
this.form.setFieldsValue(filedsVal); //批量给表单控件赋值
必须这么定：
因为vue操作dom是异步操作,所以下面写法保证表单界面显示一致。
this.$nextTick(()=> {
this.form.setFieldsValue(fieldsVal);
});
怎么取得表单的每一个值？
通过ant-design-vue去获取表单的数据是使用v-decorator的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验；
<template><a-form @submit="handleOk" :form="form">// :form="form" 必须优先注册<!-- 客户姓名 --><a-form-item:labelCol="labelCol" // 排列样式:wrapperCol="wrapperCol"label='客户姓名：'><a-inputv-decorator="['name', // 给表单赋值或拉取表单时，该input对应的key{rules: [{ required: true, message: '请输入客户名称!' }]}]"placeholder="请输入客户名称"/></a-form-item></a-form></template>export default {data() {return {form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据}}}
通过v-decorator给表单项控件开关控件赋值
<a-switch v-decorator="['Status', {initialValue: true, valuePropName: 'checked'}]" />
要加initialValue值与valuePropName
