ant-design-vue

所有组件

<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组件的使用

1. 基础使用
   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 : 作为作用域插槽可以公布的对象。

2. 分页
   pagintion: object
   {
   current:number //当前页数
   pageSize: number //每页条数
   pageSizeOptions:string[] //指定每页可以显示多少条
   ShowQuickJumper:boolean 是否可以快速跳转某页
   ShowTotal:function(total,range)//显示数据总量和当前数据顺序。
   total:number //数据总数
   }

3. rowSelection
   代表列表项是否可选择
   最主要两个选项:
   {
   selectedRowKeys:string[] //指定选中项的key,需要和onChange进行配合。
   onChange:Function(selectedRowKeys, selectedRows) //选中项发生变化时的回调。
   }

4. 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-input
        v-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