elementUI框架的 el-row el-col 与 el-table-column 用法区别！

acoolgiser

发布于 2020-05-04 14:00:15

24.3K0

发布于 2020-05-04 14:00:15

文章被收录于专栏：acoolgiser_zhuanlanacoolgiser_zhuanlan

elementUI框架的<el-row> <el-col> 与<el-table-column>用法区别！

初学者可能很容易混淆它们的用法，其实是没有认真看官方文档，下面总结一下：

<el-row> <el-col>标签是属于element的Layout布局控件：

如下图，参考element官网的说明：

<el-row> <el-col>是Layout布局控件中的组件：

通过官方文档的说明，即布局的一行（el-row）的宽度分为24等份，通过span属性来确定每一个列(el-col)的宽度，占了24份中的几份。无论一个el-row中有几个el-col，其span的总值必须等于24.

上图的不同颜色的布局代码如下：

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <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-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>