Vue2升级Vue3 --- antd升级

1.v-model升级

• v-model:checked: CheckableTag、Checkbox、Switch
• v-model:value: Radio、Mentions、CheckboxGroup、Rate、DatePicker、Select
• v-model:visible: Tag、Popconfirm、Popove、Tooltip、Moda、Dropdown
• v-model:activeKey: Collaps、Tabs
• v-model:current: Steps
• v-model:selectedKeys: Menu

2.版本迁移文档未写明变更：

• a-select：optionFilterProp=“children” => optionFilterProp=“label”
• a-select：onSearch 与showSearch必须同时存在
• a-form-item：prop => name
• a-modal：dialogClass => class
• a-tree：v-model:value => v-model:expandedKeys、
• a-tree: ‘e.selectedNodes[0].data.props.dataRef’ => ‘e.selectedNodes[0].props.dataRef’
• a-table：slot中指定为record，不能为row

3.a-form报错：

• a-form-item要在a-form标签内部
• a-form-model更换为a-form
• a-form的validate事件重构，callback => Promise

4.a-form自定义校验规则

let verifyFilekey = async (rule, value) => {  // 加上async，否则依旧warning
      let isRepeat = true
      if (!value) {
        return Promise.reject(new Error('请输入文件key！'))
      } else {
        await this.$http             // 使用await，否则无法return reject
          .post(`${API_ROOT}/uiserv/protocol/file/isExistKey`, {
            filekey: value,
            fileid: this.configData.fileid,
          })
          .then((res) => {
          })
          .catch((error) => {
            isRepeat = false
            errorMessage(error, this)
          })
        if(isRepeat) return Promise.resolve()
        else return Promise.reject(new Error('文件key重复！'))
      }
    }

5.a-form的校验空值无法判断数字

将设置的校验规则改成自定义校验规则

let verifyFileType = async (rule, value) => {
      if (!value)  return Promise.reject(new Error('文件类型不能为空'))
      else return Promise.resolve()
}

6.图标升级

• 整体：设置全局组件a-icon，内部进行转换。即可在原有基础上仅修改type完成大多数icon的更新
• 自定义组件icon更新
• icon设置更新
• a-button：手动更新，icon属性转化为template