vue+typescript+ant-design开发后台管理系统踩坑

项目地址：https://github.com/wanzizi/vu...

目前已开发表单模块和列表模块，可供参考

在使用ant-design-vue时遇到的以下问题：

国际化

ant默认为英文，要组件内部都显示中文需要declare中文文件的ts文件，不然无法被ts识别和正确读取（zh_CN报错是因为eslint认为它应该用驼峰，但是本身命名如此，所以暂时不管）

声明之后在最外层的dom统一注册，declare的文件和import from的名称要一致

注册方式

ant-design的组件与iview不同，一组组件注册在一个组件中，比如Form，Form-item都在Form组件中

form使用

1. ant-design的form官方建议用jsx写法，否则可能会出现input无法输入，校验无效等问题
2. jsx写法可以参考ant-design-react的文档，几乎一模一样
3. 因为用Form.create包裹了一层，所以父组件与jsx组件有了一层中间层，导致props不能传递给jsx子组件，查看了ant的form.d.ts声明文件，发现它提供了一个传递参数的功能，可以借用这个传递props；但是emit不受中间层影响，可以直接使用
   
4. 如果用form写了组件，在父级调用时（并且submit也是写在调用层的），想主动触发组件中的validate等方法，可以使用wrappedComponentRef创建ref

template:

<AntFormTool name="test" :configs="form.controls" :wrappedComponentRef="saveFormRef"></AntFormTool>

methods:

saveFormRef (formRef:any) {
  console.log(formRef)
  this.formRef = formRef
}

submit methods:

handleSubmit ():void{
  console.log(this.formRef)

  this.formRef.Form.validateFields((err:any, values:any) => {
    console.log(err, values)
    if (err) {
        //...
    } else {
        //...
    }
  })
}

Menu单文件递归

Menu组件如果使用单文件的话推荐用jsx写法，不然sub-menu还是会报错，我有按照官网示例的functional写法试过，也会报错