最近的项目使用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 });
});
},
... //其他方法