element ui的日期插件各种报错：el-date为什么选择了日期之后，没有显示出来呢？

 

在我花了很多时间去改bug和找解决办法后。得出的经验就是：

一般都是数据的问题！

先思考：以下问题：

无论是哪种报错。

最好我们要去打印一下。

我们传入的日期是什么格式的？是不是空的？‘’？null？undefined？

要考虑格式和非空判断。

 

 

代码：

<!--在本页面点击【返回我的主页】和【保存】都可以回到【我的】页面-->
<template>
  <el-container direction="vertical">
    <sys-header/>
    <el-main class="main-box">
      <div class="back-btn" @click="$router.back(-1)">
        <span>返回我的主页</span>
        <i class="iconfont">&#xe609;</i>
      </div>
      <el-form ref="form" :model="form">
        <el-form-item>
          <div class="avatar-upload">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-error="handleError"
              :before-upload="beforeAvatarUpload"
              :data="uploadAvatarParams"
              name="avatar"
              :with-credentials='false'
            >
              <el-avatar :src="form.avatarURL" :size="140"></el-avatar>
              <div class="upload-btn">
                <i class="iconfont">&#xe60a;</i>
                <span>修改我的头像</span>
              </div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input type="text" v-model="form.nickname"></el-input>
          <i class="iconfont">&#xe632;</i>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" :label="1">男</el-radio>
          <el-radio v-model="form.sex" :label="2">女</el-radio>
          <el-radio v-model="form.sex" :label="0">保密</el-radio>
        </el-form-item>
        <el-form-item label="简介">
          <i class="iconfont">&#xe632;</i>
          <el-input v-model="form.intro" placeholder="请填写个人简介"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <i class="iconfont">&#xe632;</i>
          <el-date-picker v-model="form.birthday" type="date" placeholder="请填写生日"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <button @click="editUserInfo(form)" class="save-btn"><a>保存</a></button>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import apiRequest from "@/utils/request";
import sysHeader from "@/components/header";
import axios from "axios";
import {changeTimestampToYearMonthAndDay} from "../../utils/format";

export default {
  name: "Settings",
  components: {sysHeader},
  data() {
    return {
      uploadUrl: axios.defaults.baseURL + 'api/userinfo/avatar',
      uploadAvatarParams: {
        uid: localStorage.getItem("userid"),
        token: localStorage.getItem("token")
      },
      form: {
        avatarURL: '',
        nickname: '',
        sex: '',
        intro: '',
        birthday: '',
      },
    };
  },

  mounted() {
    this.getUserInfo();
  },

  methods: {
    // 获取用户信息
    getUserInfo() {
      apiRequest("post", "api/user/detail", {
        uid: localStorage.getItem("userid"),
        token: localStorage.getItem("token"),
      }).then((res) => {
        console.log(res.data)
        let resData = res.data;
        this.form = {
          avatarURL: resData.avatar,
          nickname: resData.nickname,
          sex: resData.sex,
          intro: resData.intro,
          birthday: resData.birthday ? changeTimestampToYearMonthAndDay(resData.birthday) : resData.birthday,
        };
        console.log("用户的生日是：" + this.form.birthday)
        console.log(this.form.birthday)
        console.log(typeof this.form.birthday)
      }).catch((err) => {
        if (err) {
          console.log(err.message)
        }
      });
    },
    // 上传头像
    handleAvatarSuccess(res, file) {
      console.log(file)
      console.log(res)
      this.form.avatarURL = res.data.avatarURL
      console.log('上传图片成功')
      console.log(this.form.avatarURL)
    },
    handleError() {
      console.log('图片上传失败')
    },
    beforeAvatarUpload(file) {
      console.log(file.type)
      const isSupportedFormat = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLte10M = file.size / 1024 / 1024 <= 10

      if (!isSupportedFormat) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLte10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isSupportedFormat && isLte10M
    },
    // 修改用户信息
    editUserInfo(form) {
      console.log(this.form)
      console.log(this.form.birthday)

      apiRequest('post', '/qas/api/action/updateUserInfo', {
        sex: form.sex,
        birthday: form.birthday ? Date.parse(form.birthday) : '',
        nickname: form.nickname,
        avatar: form.avatarURL,
        intro: form.intro,
        uid: localStorage.getItem("userid"),
        token: localStorage.getItem("token"),
      })
        .then((res) => {
          console.log(res)

        })
        .catch((err) => {
          if (err) {
            console.log(err.message)
          }
        })

    }
  }
  ,
  created() {

  }
}
;
</script>

<style lang="scss" scoped>
.main-box {
  position: relative;
  @include maxwidth;
  @include box;
  width: 100%;

  .back-btn {
    position: absolute;
    top: 30px;
    right: 25px;
    color: $default-color;
    font-size: $small-font;
    cursor: pointer;
  }

  .avatar-upload {
    text-align: center;

    .avatar-uploader {
      position: relative;
      display: inline-block;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      overflow: hidden;

      .upload-btn {
        @include flex-center(column);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.24);
        cursor: pointer;

        .iconfont {
          font-size: 42px;
        }
      }
    }
  }

  .save-btn {
    @include follow-btn-color;
    width: 80px;
    height: 36px;
    background: #FFBF00;
    border-radius: 6px;
    margin: 70px auto;

    a {
      font-size: 14px;
    }
  }
}

/deep/ .el-form {
  width: 36%;
  padding: 50px 0;
  margin: 0 auto;

  .el-form-item {
    &:not(:first-child) {
      margin: 0;
      padding: 45px 0 15px;
      border-bottom: 1px solid #f1f1f1;
      @include flex-start-center;

      .el-form-item__label {
        width: 85px;
        font-weight: bold;
        color: $base-color;
        text-align: left;
        font-size: $default-font;
      }

      .el-form-item__content {
        @include flex-start-center;

        .iconfont {
          color: #407bff;
          font-size: 24px;
        }

        flex: 1;

        .el-input__inner {
          border: 0;
          font-size: $default-font;
          font-weight: bold;
          color: $default-color;

          &::placeholder {
            font-weight: normal;
          }
        }

        .el-radio__label {
          font-size: $default-font;
          font-weight: bold;
        }
      }
    }
  }
}

/deep/ .el-radio {
  @include flex-center;
  margin-right: 40px;

  .el-radio__input.is-checked .el-radio__inner {
    background: none;
    border: 2px solid #407bff;
  }

  .el-radio__inner {
    width: 20px;
    height: 20px;

    &::after {
      width: 10px;
      height: 10px;
      background: #407bff;
    }
  }
}

.clearfix {
  clear: both;
}
</style>