Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

Recently, I have been working on a project and summarized the problems I encountered and how I solved them.

Overflow and absolute priority issues

The parent element sets overflow: hidden, and even if the child element is set to absolute, it is hidden beyond the parent element.

Because the parent element sets overflow: hidden, it forms a BFC with a higher cascade order than absolute. Cause it to be hidden.

So if the child element is to be displayed beyond the parent element, the parent element should not set overflow: hidden.

Float problem

An inline element (inline or inline-block) is followed by a floating element.

Floating elements are shown first, and then inline elements are lined up against them.

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

    .float {
      float: left;
      background-color: blue;
    }
  </style>
  <div class="content">
    <span>I'm an inline element</span>
    <span class="float">I'm a floating element</span>
  </div>

Copy the code

Now that you have a Flex layout, you don’t need to use floats much, so here’s a refresher on floats.

Floating to an element is essentially leaving the document flow

  1. Float was originally used to wrap text around an image. If you float an image, the text will wrap around the image.
  2. The float element becomesinline-blockThe element
  3. The elements that float together are arranged in a row, and if the elements that float behind do not fit, they are moved to the next row.

Flex layout

In flex layout, you can use Flex-basis to set the current element’s width, but if other elements are too long, the current element’s width will not be flex-basis’s. It will shrink year-on-year. Since flex-shrink defaults to 1, it automatically shrinks if the width is insufficient.

I generally use two methods:

The first method: at this point you can set flex-shrink: 0 to the current element so that it will not shrink.

Second method: you set flex:1 to the element that is too long, which is the same as flex-grow: 0, flex-shrink :1, and flex-basis: 0%, so that it automatically scales and does not affect the Flex-basis element.

El-table Indicates the user-defined content

In normal el-table, the prop of el-table-column is used to obtain the corresponding value of data.

If you need to customize the content and provide the slot content, el-Table takes the slot content to render.

But el-Table is a little bit different.

  <el-table-column label="State">
    <el-tag>The label</el-tag>
  </el-table-column>
Copy the code

There is no need to render el-tag content. Scoped slots have to be provided.

<el-table-column label="State">
  <template slot-scope="scope">
    <el-tag>The label</el-tag>
  </template>
</el-table-column>
Copy the code

Slot-scope =”scope” is required to render correctly.

Addendum: I am using vue 2.5.17, elment- UI 2.4.8

Extra horizontal line problem for el-table

I’ve given the EL-Table, using CSS, a maximum height, and when it’s higher than that, I’m going to scroll, and the EL-Table is going to have a horizontal line

This can be hidden with the following style

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

You can also set the height property of the table by setting it to scroll if it exceeds the height. CSS Settings are not required.