总结常见问题

CGin

Wed Apr 26 2023

-总结

# 1.AntD 使用 Form 表单 DatePicker 时间组件时间差 8 个小时

解决方法：用 moment 格式化时间

import moment from "moment";
// 判断日期格式防止页面报错
if (typeof item.date === "object") {
  item.date = moment(new Date(item.date)).format("YYYY-MM-DD");
}

# 2.动态绑定 img src 属性为本地图片相对地址时不显示

解决方法：给图片相对路径加上 require

<img :src="imgUrl"/>

imgUrl:require("../../imgs/1.jpg")

# 3.vue 路由变了页面不跳转

解决方法：在 APP.vue 里的 router-view 里边添加 :key="$route.fullPath"

<!-- 添加:key="$route.fullPath"防止同路由页面不刷新问题 -->
<router-view :key="$route.fullPath"></router-view>

# 4.表格内日期组件 DatePicker 被遮挡

解决方法：添加 :transfer="true"

<DatePicker
    :transfer="true"
/>

# 5.el-image 图片在表格行内预览时被遮挡，点击图片切换顺序始终不变总是从第一张开始

解决方法：去掉遮挡添加 preview-teleported="true"

<el-image
    style="width: 160px; height: 90px"
    preview-teleported="true"
    :preview-src-list="arr"
    :src="scope.row.imgUrl"
    @click="imageClicked(scope.row.imgUrl)"
></el-image>

function imageClicked(imgUrl){
  let imgLisst = arr
  let index =imgList.indexOf(imgUrl)
  let right = imgList.splice(index)
  let left = imgList.splice(0,index)
  let newArr = right.contact(left)
  arr = newArr
}

# 6.js 获取不了 html 元素

可能原因：dom 未加载完成提前调用 js 解决方法：使用window.onload在加载完成后调用

window.onload = function () {
  var el = document.getElementById("el");
};