布局
分栏间隔
gutter
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
分栏偏移
offset
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
对齐方式
将 type
属性赋值为 ‘flex’,可以启用 flex 布局,并可通过 justify
属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
<el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
输入
<el-input v-model="materialForm.Name"></el-input>
标签
<el-form-item label="Phase Number">
</el-form-item>
限制长度
若有标签和文本框合体,则加在合体前后
<el-col :span="7">
</el-col>
按钮
<el-button @click="onSubmit">MYOUNG</el-button>
和旁边的距离
style="margin-left:100px"
right top bottom
分界线
<el-divider content-position="left">Phase (SPHSX)</el-divider>
单选
<el-radio-group v-model="materialForm.Name">
<el-radio label="Austenite"></el-radio>
<el-radio label="Bainite"></el-radio>
<el-radio label="Pearlite"></el-radio>
<el-radio label="Ferrite"></el-radio>
<el-radio label="Martensite"></el-radio>
<el-radio label="Gamma(Fe-N)"></el-radio>
<el-radio label="Epsilon(Fe-N)"></el-radio>
</el-radio-group>
添加图片
<img src="../../assets/img/material3.png" alt />