项目笔记

# A-Form

# rules

// 对象属性
const rules: Record<string, Rule[]> = {
  mobile: [
    {
      required: true,
      trigger: 'blur',
      validator: (rule: Rule, value: string) => {
        if (!value) {
          return Promise.reject(new Error('错误信息'))
        }
        return Promise.resolve()
      },
    }
  ],
  captcha: [
    {
      required: true,
      trigger: 'blur',
      len: 6
    }
  ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# A-Form-Item

作用:表单名称，会作为表单字段 id 前缀使用	,循环表单用数组,需要定位到属性.
:name="['shiftTime', index, 'time','rangTime']"

1
2

# rules 路由校验规格

:rules="{required: true,message:"错误信息"}"
:rules="{required:true,validator:validator}"
:rules="[{required:true,validator:validator}]" // 可数组传入
{
    required: true,
    trigger: 'blur', // 校验触发时机 	'blur' | 'change' | ['change', 'blur']
    validator: validate
}
// validator	自定义校验（注意，callback 必须被调用）
// 官方文档指出 https://github.com/ant-design/ant-design/issues/5155
const validate = (rule,value,callback) => {
    if(!value) {
        Promise.reject(new Error('错误信息'))
    }
    return Promise.resole()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 坑

v2 升级 v3
- 时间组件英文显示，且点击时间组件无法弹出窗口，原因是v2使用momentjs，v3使用dayjs，两者不兼容。导入时间组件，使用 momentjs 或者 date-fns 日期库
- import DatePicker from 'ant-design-vue/es/date-picker/moment'
- 文档： https://www.antdv.com/docs/vue/replace-date-cn
- 同时引入import TimePicker from 'ant-design-vue/es/time-picker/moment';
  - 会导致dataPciker丢失样式
表格table
- v2 升级到 v3 dataIndex 从支持路径嵌套如 user.age 改成了数组路径如 ['user', 'age']。以解决过去属性名带 . 需要额外的数据转化问题

上次更新: 2023/05/07, 13:36:36