最近项目遇到的问题总结（1）

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

最近在做项目，总结下遇到的问题，以及我是怎么解决的。

overflow和absolute的优先级问题

父元素设置了overflow: hidden，即使子元素设置absolute，它超出父元素的地方还是会被隐藏掉。

因为父元素设置了overflow: hidden，形成了一个BFC，他的层叠顺序比absolute的高。导致被隐藏了。

所以子元素如果要超出父元素展示，则父元素不要设置overflow: hidden。

float问题

一个内联元素（inline或者inline-block）后面如果跟着一个浮动元素。

则会先展示浮动元素，然后内联元素靠着浮动元素排列。

  <style>
    span {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .float {
      float: left;
      background-color: blue;
    }
  </style>
  <div class="content">
    <span>我是内联元素</span>
    <span class="float">我是浮动元素</span>
  </div>

因为现在有了flex布局，浮动就用的比较少了，这里补充下浮动的相关知识。

浮动到元素本质上是脱离文档流

1. 浮动最开始是用来实现文字环绕图片效果，对图片设置浮动，文字就可以环绕图片。
2. 浮动后的元素会变成inline-block元素
3. 一起浮动的元素会一行排列，如果后面浮动的元素排列不下，则会跳到下一行排列。

flex布局

flex布局下可以通过flex-basis设置当前元素的宽度，但是如果其它元素内容过长，这样当前元素的宽度就不会是flex-basis设定的值。而是会同比缩小。因为flex-shrink默认值是1，宽度不够，会自动缩小。

我一般采用2种方法：

第一种方法：这时你可以给当前元素设置flex-shrink: 0，这样它就不会缩小。

第二种方法：你给过长的元素设置flex:1，等同于flex-grow：0, flex-shrink：1, flex-basis: 0%，这样它会自动缩放，就不会影响到flex-basis的元素。

el-table自定义内容

正常el-table是通过el-table-column的prop，来取data对应的值。

如果需要自定义内容的时候，需要提供slot内容，el-table会取slot内容来渲染。

但是el-table会有点不一样。

  <el-table-column label="状态">
    <el-tag>标签</el-tag>
  </el-table-column>

这样是无法需要渲染出el-tag的内容。 还得提供scoped slot。

<el-table-column label="状态">
  <template slot-scope="scope">
    <el-tag>标签</el-tag>
  </template>
</el-table-column>

要提供slot-scope="scope"才能正确渲染。

补充：我是使用 vue 2.5.17版本, elment-ui 2.4.8版本

el-table的额外横线问题

我给el-table，通过css设置了一个最大高度，超过高度就滚动，这时el-table就会多了一根横线

这个可以使用下面样式把横线隐藏掉

.el-table {
  &::before {
    z-index: inherit;
  }
}

也可以通过设置给table设置height属性，超过height高度就滚动。无需使用css设置。