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

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

Ant Design Vue 1.x 1.Form组件（2.x之后用法不同） getFieldDecoratorv-decorator  2.使用过的组件 3.表格（a-table） API详解：

columns，指定一个对象用于配置表格列。 dataSource，用于指定表格的数据源。 loading，是否显示加载特效。 rowKey，用于指定每个表格列的key值，可指定一个字符串或者一个参数为每行的数据对象的函数。

表格列描述对象（Column）： {

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

} scopedSlots: { customRender: ‘name’ }, customRender:(text, record, index)=>{

  return text;

} //表格内插槽 <template slot=“extra”> </template> 在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

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

4.upload defaultFileList fileList: [

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

],

Ant Design Vue 2.x 1.Table组件常用属性 <a-table

    :columns="columns"
    @change="getTables"
    :loading="loadingTable"
    :data-source="data.data"
    :pagination="data.paginate"
    :bordered="false"
    :scroll="{ y: height }"
    :rowKey="key">

</a-table>

相关 属性 loading columns 配置对象

align，设置内容的对齐方式，left、right、center ellipsis，超过宽度将自动省略，暂不支持和排序筛选一起使用。 title，表格头的标题。 dataIndex，对应数据对象内的键。 width:，指定表格列的宽度，字符串类型。 key ，Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性。 customRender，自定义渲染函数，Function({text, record, index})； slots，指定某些列属性作为插槽来使用，例如指定customRender属性后，可直接使用插槽代替自定义输出； slots: {customRender: ‘content’} 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’}, //表格插槽输出 <template #action> </template> 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组件。绑定数据和表单验证 <a-form layout=“vertical” ref=“formRef” :model=“formState” :rules=“rules”> <!–姓名–> <a-form-item required> <template #label>

  <span style="margin-right: 3px">姓名</span>
  <a-tooltip title="填写客户姓名" placement="right">
    <QuestionCircleOutlined style="color: rgb(192, 196, 204); font-size: 13px;" />
  </a-tooltip>
</template>

<a-input size=“large” placeholder=“姓名” allowClear>

  <!-- 图标 -->
  <template #prefix>
    <UserOutlined style="color: rgb(192, 196, 204); font-size: 13px;" />
  </template>
</a-input>

</a-form-item> </a-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);
  });

};

1. 单独使用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.菜单 <a-menu> <a-menu-item-group> <a-menu-item> <a-menu-divider>

问题总结 1.Form组件表单校验规则不生效 Form-Item组件的name属性必须和属性名一致，不填写name时不会进行校验

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

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