ant-design-vue常见问题

最近的项目使用ant-design-vue, 细节上遇到一些小问题，解决方法记下来，备以后速查。

使用Message全局提示

代码中的写法

this.$message.success("添加成功");

上面这种写法会提示 $message 为 undefined

解决方法

import { message } from "ant-design-vue";
// 这里省略其他代码
Vue.prototype.$message = message;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

使用confirm确认对话框

代码中的写法

this.$confirm({处理逻辑})

问题和上面一样 $confirm 为 undefined

解决方法

import { Modal } from "ant-design-vue";
// 这里省略其他代码
Vue.prototype.$confirm = Modal.confirm;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

给Modal中的表单赋值

场景

在一个弹框中写一个表单，进行数据修改。在表单弹出之前先给表单内数据赋值

问题

报错 You cannot set a form field before rendering a field associated with the value.

解决方法

把赋值语句放到 nextTick中去

methods: {
    onEdit(record) {
      this.editMode = true;
      this.visible = true;
      this.errMsg = "";
      this.roleId = record.roleId;
      this.$nextTick(() => {
        this.form.setFieldsValue({ roleName: record.roleName });
      });
    },
    ... //其他方法