ant-design-vue 遇到的问题和常见场景的实现

 

ant-design-vue 遇到的问题和常见场景的实现

 

 

1、select/datepicker/asacader 组件菜单框显示时，滚动页面，菜单框不随父元素滚动，而是根据body页面滚动

原因： ant默认append到body
解决： 通过组件的属性getXxxContainer 修改渲染的父元素

  
  
 // form.vue
  

!!! 全局化配置

  
      
   
  // script
  methods: {
    getPopupContainer (triggerNode) {
      // 触发节点 指某个页面的select，tooltip，menu等含弹框显示的组件，这些组件显示下拉框会触发该方法，不包括datapicker，可全局配置
      return triggerNode
    }
  }

2、ant 内引入moment，日期均返回moment

页面使用直接引入moment、不需要npm i

  import moment from 'moment'  

moment组件值转化

  this.form.date.format('YYYY-MM-DD')

3、form表单里upload选择xlsx文件(只选择一份，后选择的会覆盖前选择文件)，最后提交上传(整个form表单form-data处理)

// http.js
postByForm (url, params) {
    return this.Axios.post(url, params, {
      headers: {
        'Content-type': 'multipart/form-data'
      }
    }).catch(e => {
      return Promise.reject(new ApiError(
        'network error', -1
      ))
    })
  }

// apis.js 
// 所有传的参数formData化
export async function updateMultiMember ({accountID, upload}) {
  const formData = new FormData()
  upload.forEach((file) => {
    formData.append('upload[]', file)
  })
  formData.append('accountID', accountID)
  formData.append('appkey', Global.appkey)
  formData.append('channel', Global.channel)
  formData.append('chainTokenArray[]', [Global.chainToken])
  let res = await saveAgents(formData)
  return res
}

// upload.vue

8、form表单编辑状态初始化 通过配置mapPropsToFields

let options = info.chainOrgName ? {
      mapPropsToFields: () => {
        return {
          chainOrgName: this.$form.createFormField({
            value: info.chainOrgName
          }),
          orgDomain: this.$form.createFormField({
            value: info.orgDomain
          }),
          description: this.$form.createFormField({
            value: info.description
          })
        }
      }
    } : {}
    this.nodeForm = this.$form.createForm(this, options)
  },