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

亦凉 2022-12-04 09:17 246阅读 0赞

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

**一般都是数据的问题！**

先思考：以下问题：

无论是哪种报错。

最好我们要去打印一下。

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

要考虑格式和非空判断。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

代码：

<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"></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"></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"></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"></i>
              <el-input v-model="form.intro" placeholder="请填写个人简介"></el-input>
            </el-form-item>
            <el-form-item label="生日">
              <i class="iconfont"></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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221123/9c1d1e7b58634ea7b4bf7872a8739133.png