bug大全

草莓千层蛋糕
100 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

13d10fe07a6bb1de60ca1448662acfc.jpg

一、select高亮回显

列表有数据都不高亮，在页面跳转watch route 传过来的值赋值上这个下拉框的

原因：


route传过来都是string

解决： number（）转换一下

二、id没有值的时候 进行类型转换会变成NaN

Number(route.query.id)

三、el-input-number 组件修改默认值为空

num设置成undefined，显示为空，设置成null会显示为0

<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>

image.png

四、 二次确认需要用 async await 不然不会同步

1659413699886.jpg

image.png

五、分页点击第4页 进入详情 详情页返回上一页的话 页面会刷新回到pageNum = 1

873a390c0143298642a9bbc93082b4a.jpg

用keep-live 9ef9d396af4458b79c61bc6d3a9f442.jpg 给缓存的页面一个key 有时候缓存的页面参数不一样

六、时间选择器不要用这种开始时间与结束时间连在一起的

8c1af960ea7e2a65c634cf2080e3011.jpg

 <el-date-picker
                    range-separator="至"
                    :disabled="receiveTime || see"
                    @change="usePickerChange"
                    v-model="ruleForm.usetime"
                    type="datetimerange"
                    align="right"
                    :picker-options="setDateRange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                  >
                  </el-date-picker>

七、vue element 动态表单校验 deliveryDistanceUnit is not a string

image.png

image.png

八.不要写这种手写提交判断

image.png

用动态表单 www.lxtian.com/archives/89…

九、时间日期选择器

image.png image.png

image.png

不能设置为函数返回

 selectableRange: (time) => {
          /* 1.先判断是发放时间有没有结束是时间 */
          /* 2.再判断跟发放时间是否是同一天 */
          if (this.ruleForm.issueStartTime && !this.ruleForm.issueEndTime) {
            let useTime = this.ruleForm.issueStartTime
              .split(" ")[0]
              .split("-")
              .join("");
            let validTime = time.split(" ")[0].split("-").join(""); // 取出开始日期 结果：‘20201028’
            console.log("useTime", useTime);
            console.log("validTime", validTime);

            // if (parseInt(endDate) > parseInt(sDate)) {
            //         // 如果结束日期大于开始日期  不用判断时间
            //         callback();
            //       } else {
            //         if (parseInt(endTime) <= parseInt(sTime)) {
            //           // 如果结束日期不大于开始日期  判断结束时间是否大于开始时间
            //           callback(new Error("结束日期必须大于开始日期"));
            //         } else {
            //           callback();
            //         }
            //       }
            return `${new Date(this.ruleForm.issueStartTime).split(" ")[4]} - 23:59:59`;
          } else if (
            this.ruleForm.issueStartTime &&
            this.ruleForm.issueEndTime
          ) {
          }
        },

image.png

十、 关于提示的选取

校验优于 $message

image.png

十一、统一风格

ed3c44e31318494afa8fb95546d1df7.png

b8b02310a9a41edcc26df48b1dc41e8.png

用element ui form 表单校验

image.png

image.png

不需要这种手动校验

十二、弹层有取消那么点击空白处 不能关闭弹窗

image.png

十三、

  <el-form-item label="发放数量：" prop="num">
          <el-input
            placeholder="请输入每个用户的发放数量"
            oninput="value=value.replace(/[^0-9]/g,'')"
            min="0"
            @input="(e) => (ruleForm.num = isnumber(e))"
            class="flex-1"
            clearable
            v-model="ruleForm.num"
            type="number"
          ></el-input>
        </el-form-item>

21c643a38c68ecdb16be1bb2c8c6332.jpg

e4451890fde6a48fd994eb5ef3f1491.jpg

3dde77772ace0aab9944dc6cb4f567a.jpg

8b8fbbeaf32eb331566398d7e35ac11.jpg

90a17c43caafedb557503dca5bc1c5a.jpg d152fb1801c8ec8a81102ca0712fc42.jpg

2975d2fb76aae6e4aa6f6435619f4a9.jpg

解决：去掉这一行

 oninput="value=value.replace(/[^0-9]/g,'')"

或者统一修改成这个：

 <!-- <el-input-number v-model="ruleForm.num" :controls="false" clearable placeholder="请输入每个用户的发放数量" /> -->
avatar
文章
阅读
粉丝