Element – UI — Layout Layout

The company requires the layout as shown below:

The relevant code is as follows (only layout related operations have been written here for emphasis on layout presentation) :

        <el-row>
          <el-col :span="12">
            <! -- Input box 1 -->
            <el-col :span="24">Enter box 1 related code</el-col>
            <! -- Input box 2 -->
            <el-col :span="24">Input box 2 related code</el-col>
            <! -- Drop down box 1 -->
            <el-col :span="24">Drop - down box a related code</el-col>
          </el-col>-- -- -- -- -- -- here, the part of the code above is on the left side of the columns, the following code is on the right side column part -- -- -- -- -- < el - col: span ="11" :offset="1"> <! -- Input box 3 --><el-col :span="24">Enter box three related codes</el-col><! -- Map Display --><el-col :span="24">Map code</el-col>
          </el-col>
        </el-row>
Copy the code

Analysis of ideas:

1. There are two el-cols in the el-row to hold the left and right columns

2. The two EL-Col are divided into 24 columns in total, and related mini-layouts are carried out in each column. In the mini-layout, the span of El-Col is 24 in order to fill up the space in the mini-layout

3. The offset also counts as a column

(Emphasis!) A layout column has 24 columns, making it easy to create a layout quickly. (The following are excerpted from the official Elder-UI document, mainly to strengthen memory, if you don’t like it, you can read it directly!)

1. Basic layout

Use a single column to create a basic grid layout, through row and COL components, and through col componentsspanProperties allow for a freely composed layout.

The first is to fill it up24Columns < el - row ><el-col :span='24'></el-col></el-row> The second type, using two modules respectively12Columns, the24<el-row><el-col :span='12'></el-col>
<el-col :span='12'></el-col></el-row> Subsequent conditions, according to their own needs to changeCopy the code

2. Column spacing

There are gaps between columns, provided by the Row componentgutterProperty to specify the interval between each column. The default interval is 0.

<el-row ::gutter='20'>
 <el-col :span="12></el-col>
 <el-col :span="12></el-col>
</el-row>
Copy the code

3. Hybrid layout

A complex hybrid layout is formed by arbitrarily extending the combination of basic 1/24 columns.

Case one <el-row :gutter="20">
<el-col :span="16"></el-col>
<el-col :span="8"></el-col></el-row> gutter="20">
<el-col :span="8"></el-col>
<el-col :span="8"></el-col>
<el-col :span="8"></el-col></el-row> In other cases, you can freely combine them as requiredCopy the code

4. The column offset

Support offset specifies the number of columns (offset from left to right) by specifying the COL componentoffsetProperty to specify the number of columns offset by column.

This is according to their own needs, free arrangement is free to write, understand what the function of offset, you know you are the magic brush ma Liang!! <el-row :gutter="24">
<el-col :span="7" :offset="1"><el-col>
<el-col :span="7" :offset="1"><el-col>
<el-col :span="7" :offset="1"><el-col>
</el-row>
Copy the code

5. alignment

throughflexLayout to columns for flexible alignment, willtypeProperty is assigned to ‘flex’ to enable the Flex layout and passjustifyProperty to specify the values of start, center, end, space-between, and space-around to define the layout of child elements.

In case one, the horizontal arrangement of (justify) is Center <el-row type="flex" justify="center">
<el-col :span="6"></el-col>
<el-col :span="8"></el-col>
<el-col :span="10"></el-col></el-row> In case two flex layout, (justify) in horizontal order would be end <el-row :gutter="16" type="flex: justify="end">
<el-col :span="2"></el-col>
<el-col :span="19"></el-col>
<el-col :span="3">  For other cases, see the official elder-UI documentationCopy the code

Row and Col related properties

Row related attributes

Col related attributes

Today, when I was working on a project of the company, I was required to separate the left and right sides of the layout in a dialogue layer, but I couldn’t do it. I always wanted to wrap the right side of the div tag, and then adjust the CSS layout, but it didn’t happen. When my supervisor saw that I didn’t do it, he asked me to adjust the CSS layout directly. I was thinking that element-UI should have operations related to layout, but I didn’t know that. Then IT occurred to me that my colleague had developed a similar page, so I went to look at his code, and sure enough, I found the code of the same page layout. I looked at it for a while and understood it. Then I achieved the left and right layout operation I want, record, so as not to make mistakes in the future!

Itchao come on! I will be a very good front-end development engineer!



—- August 17, 2021 19:28:38