Ant Design Vue使用记录，持续记录

好些问题，每次解决了，下次遇到了又要重新翻文档，干脆就自己记录一下。

Ant Design Vue 1.x

1.Form 组件（2.x 之后用法不同）

• Form.create(options) | this.$form.createForm(this, options)，通过 JFX 方式去定义一个 Form 组件的各种属性。经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用 this.$form.createForm(this, options)；
• Form 对象 —–Form.Item 对象 —— decorator 相关对象（参数为输入组件绑定的属性，相关数据选项），相关选项解释：https://antdv.com/components/form-cn/#API
• 通过 Form.create()创建的 Form 对象，绑定在 a -form 组件上，然后就可以把整个表单当做一整个对象去处理，每个输入型组件都可以通过 v -decorator 自定义自己的行为（表单验证等）。
• 经过 getFieldDecorator或 v-decorator  包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性）onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管。
• 使用 Form.create 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 Form.create 并自行处理数据。
• setFieldsValue 设置表单默认值，必须在 Form 渲染之后进行，必须和参数对应，参数数量只能少或者相对相等，不能多。

2. 使用过的组件

3. 表格（a-table）

API 详解：

1. columns，指定一个对象用于配置表格列。
2. dataSource，用于指定表格的数据源。
3. loading，是否显示加载特效。
4. rowKey，用于指定每个表格列的 key 值，可指定一个字符串或者一个参数为每行的数据对象的函数。
5. pagination，绑定的分页组件，https://antdv.com/components/pagination-cn/

表格列描述对象（Column）：

1. dataIndex，对应数据对象中哪一个数据？（指定属性名），可以不指定该属性，使用插槽时 slot-scope 传递的是整个数据行对象。

   {
       title: 'Action',
       key: 'action',
       scopedSlots: {customRender: 'action'},
   }
   

2. key，绑定一个 vue 需要的 key 值。（数据对象内的属性名）
3. customRender，绑定一个处理数据的自定义函数。
4. title，显示的列标题文字。
5. slots，使用 columns 时，可以通过该属性配置支持 slot 的属性，如 slots: {filterIcon: ‘XXX’}，代表这个在表格内可以使用插槽名为 XXX 的插槽来代替 filterIcon 属性（column 支持的一个属性）的值。
6. scopedSlots: {customRender: ‘tags’}, 指定一个名为 tags 的插槽，用来展示当前列的值，slot-scope 值为指定列的值和行值。和 customRender 只能生效一个。
7. customRender，自定义该列的数据渲染，列的值为函数的返回值。和 scopedSlots 只能生效一个。

   scopedSlots: {customRender: 'name'},
   customRender:(text, record, index)=>{return text;}
   
   // 表格内插槽
   

在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

3.select 选择框

value 传过去了但是显示的是 value 而不是显示对应的选项，是因为传过去的值是 number 类型，而值是 string 类型，设置的 value 值跟选项的 value 值不相等，所以就找不到对应的选项值，转化为 string 类型就可以解决了。

4.upload

官方链接：https://1x.antdv.com/components/upload-cn/#components-upload-demo-default-files

受控的上传文件列表。可以自定义 fileList 的元素，upload 的上传列表将对应的显示。使用 defaultFileList 设置已上传的内容。支持列表图片、照片墙、插槽等自定义上传的 UI 样式。

 fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        },
 ],

Ant Design Vue 2.x

1.Table 组件常用属性

相关 属性

1. columns，列的配置对象，https://2x.antdv.com/components/table-cn#API
2. loading布尔值，是否显示表格的加载效果。
3. data-source，表格的数据源对象。
4. pagination，表格的分页相关配置，https://2x.antdv.com/components/pagination-cn
5. bordered，布尔值，是否显示表格竖向的边框。
6. scroll，用于固定表头，以及行数据滚动。
7. rowKey，每列的 key 值，作用同 vue 的 key。
8. @change，分页、排序、筛选变化时触发的事件。
9. size，表格的大小。

columns 配置对象

1. align，设置内容的对齐方式，left、right、center
2. ellipsis，超过宽度将自动省略，暂不支持和排序筛选一起使用。
3. title，表格头的标题。
4. dataIndex，对应数据对象内的键。
5. width:，指定表格列的宽度，字符串类型。
6. key，Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性。
7. customRender，自定义渲染函数，Function({text, record, index})；
8. slots，指定某些列属性作为插槽来使用，例如指定 customRender 属性后，可直接使用插槽代替自定义输出；slots: {customRender: ‘content’}
9. sorter，指定一个自定义排序的函数，同 Array 的排序。

pagination 分页

首先需要在表格组件上配置 pagination 属性，点击换页时会触发 change 事件，事件参数为改变后的 pagination 对象。

pagination: {
    pageSize: 30,// 每页条数
    showSizeChanger: true,
    current: 1,
    total:0,
    pageSizeOptions:["30","50","100"]
}, // 分页器

配合 Thinkphp 分页时，传递 size 和 page 给后端，请求成功后更新总数量、当前页。

自定义列

通过回调函数输出值：

customRender:(moments)=>{return '每月的'+moments+"号"}

通过插槽自定义输出，下面是指定某个列属性通过插槽输出，指定 customRender 代表自定义列：

slots: {customRender: 'action'},

// 表格插槽输出

2. 栅格布局

没有匹配到设置的响应式参数时，会使用默认参数，例如没有设置 xl 的参数，xl 大小的屏幕会使用默认值。

3.datepicker 汉化无效

Antd-design-vue 2.x，使用 datepicker 选择器在 vite 工具下，中文设置无效的解决办法（大概原因是中文语言包没有被正常引入，只能强行设置中文）：

import moment from 'moment';
moment.locale('zh-cn',{
  months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
  monthsShort: '1 月_2 月_3 月_4 月_5 月_6 月_7 月_8 月_9 月_10 月_11 月_12 月'.split('_'),
  weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
  weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
  weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
  longDateFormat: {
    LT: 'HH:mm',
    LTS: 'HH:mm:ss',
    L: 'YYYY/MM/DD',
    LL: 'YYYY 年 M 月 D 日',
    LLL: 'YYYY 年 M 月 D 日 Ah 点 mm 分',
    LLLL: 'YYYY 年 M 月 D 日 ddddAh 点 mm 分',
    l: 'YYYY/M/D',
    ll: 'YYYY 年 M 月 D 日',
    lll: 'YYYY 年 M 月 D 日 HH:mm',
    llll: 'YYYY 年 M 月 D 日 dddd HH:mm',
  }});

import moment from 'moment'
import 'moment/dist/locale/zh-cn'
moment.locale('en')

4.DatePicker 组件

绑定的是一个 ref 的响应式变量（moment()），返回的是一个普通的时间字符串；

let datetime = ref(moment());
 /* 计算当前的时间范围 */
let current = computed(() => {let datetimes = moment(datetime.value);

if (type.value == 'day') {return datetimes.format("MM 月 DD 日") + "0 点" + "到" + datetimes.format("MM 月 DD 日") + "24 点";
} else if (type.value == 'week') {return datetimes.startOf('week').format("MM 月 DD 日") + "0 点" + "到" + datetimes.endOf('week').format("MM 月 DD 日") + "24 点";
} else if (type.value == 'month') {return datetimes.startOf('month').format("MM 月 DD 日") + "0 点" + "到" + datetimes.endOf('month').format("MM 月 DD 日") + "24 点";
}

5.Form 组件。绑定数据和表单验证

const formState = reactive({
  name: '',
  idCard:''
});

const rules = {
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 5,
      message: 'Length should be 3 to 5',
      trigger: 'blur',
    },
  ],
  idCard: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ]
};

const onSubmit = () => {
  formRef.value
      .validate()
      .then(() => {console.log('values', formState, toRaw(formState));
      })
      .catch(error => {console.log('error', error);
      });
};

6. 单独使用 message 和 Modal 组件时，需要单独引入 css

import "ant-design-vue/es/message/style/css"
import "ant-design-vue/es/modal/style/css"

7. 软件包动态引入

let icon=()=>import('@ant-design/icons-vue');
console.log(icon());

8. 菜单

问题总结

1.Form 组件表单校验规则不生效

Form-Item 组件的 name 属性必须和属性名一致，不填写 name 时不会进行校验

通过自定义验证方法，来验证 form 绑定的数据对象，内部对象的属性是否有效。

2. 属性不生效

defaultExpandAllRows  仅用于首次渲染时生效（所有 default 开头属性均相同规范）。