最近项目遇到的问题总结(3)

225 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情

正所谓:吾日三省吾身,为人谋而不忠乎,与朋友交而不信乎,传不习乎?

遇到问题学会总结,然后你就会发现,会遇到更多的问题,哈哈哈(开个玩笑,狗头🐶)

try...catch

我们捕获错误,用的try-catch是比较多的了。

为什么要捕获错误,因为js一旦报错,如果没有捕获到错误,后面的代码就会被中断执行。

为了不影响后面的代码执行,就要捕获错误。

我用代码模拟一下:

  console.log(a)
  console.log('hello, 答案cp3')

image.png

因为a没有定义就使用,导致报错了。这个导致后面的hello, 答案cp3也没有打印。

我们可以使用try-catch去捕获错误

  try {
    console.log(a)
  } catch (err) {
    console.log(err)
  }
  console.log('hello, 答案cp3')

image.png

可以看到虽然报错了,但是后面代码的执行还是可以正常执行。catch那里也把错误打印出来了

然后我就讲一下我这几天遇到的问题。

正常如果报错是会被catch到的,但是你要打印出来才能发现。如果你忘记打印了,控制台是没有日志的,你就会认为这段代码没有问题。

如下:

  try {
    console.log(a)
  } catch (err) {
  }
  console.log('hello, 答案cp3')

image.png

所以我因为这个问题,排查了好久好久,最后才发现是catch没有打印日志。

提示:捕获错误,一定要在catch里面打印出来,方便出问题的时候排查!!!

el-table的show-overflow-tooltip属性

el-table 如果你的内容过多是会换行显示,如果要单行显示,可以使用show-overflow-tooltip属性,它可以单行显示,滑过的时候tooltip提示整个内容。

image.png

但是如果内容太多,就导致tooltip放不下,会撑满这个屏幕,这个时候我们可以通过css去设置tooltip的最大高度。

.el-tooltip__popper {
 max-width: 600px;
}

如果你是使用scoped,上面的样式可能不会生效,就算你加了样式穿透(::v-deep或者/deep/),因为tooltip并不是在el-table层级下面,而是append在body下。

image.png

可以这样写

<style lang="scss" scoped>
.el-table {
}
</style>

<style lang="scss">
.el-tooltip__popper {
  max-width: 600px;
}
</style>

image.png

这样就生效了。