ant-design-vue使用记录

1. 向表单组件传值时（例如需要修改某一数据的值，通过表单传递给后台），报错You cannot set a form field before rendering a field associated with the value.

可能的原因有两个，一是在表单还未渲染完成就向其传值，导致报错。二是利用this.setFieldsValue(value)设置值时传递了多余表单项。
解决第一点：使用

	this.$nextTick(() => {
       // this.form.setFieldsValue(content);
      });

解决第二点： 删除多余的属性

    edit(record) {
      console.log(record);
      const content = JSON.parse(JSON.stringify(record));
      delete content.id; // 删除多余的两项
      delete content.updateTime;
      this.$nextTick(() => {
        this.form.setFieldsValue(content);
      });
    },

2. 在js文件中调用某个组件

由于接口返回的状态码不同，需要根据状态码提示用户。这里用到notification组件，一种不打断用户操作的轻量级提示方式。

import axios from "axios";
import router from "../router";
import { notification } from "ant-design-vue";

/* 请求拦截，省略 */

/* 响应拦截 */
axios.interceptors.response.use(
  response => response,
  err => {
    if (err.response) {
      switch (err.response.status) {
        case 401:
          notification.error({
            message: "401",
            description: "抱歉，未授权"
          });
          localStorage.removeItem("token");
          router.replace("/login");
          break;
        default:
          notification.error({
            message: err.response.status,
            description: "抱歉，出错了"
          });
          break;
      }
    }
  }
);
export default axios;

先记录到这里啦~~
https://github.com/Gesj-yean/vue-demo-collection 记录了更多优秀插件的使用方法。有时间的同学请看我的置顶博客，可太感谢啦。