el-col 行内显示
时间: 2023-07-10 20:06:22 浏览: 39
el-col 可以使用 inline-block 或者 inline-flex 属性来实现行内显示。
例如,下面的代码将两个 el-col 元素水平排列在一行中:
```html
<template>
<div>
<el-col :span="12" style="display: inline-block;">col-1</el-col>
<el-col :span="12" style="display: inline-block;">col-2</el-col>
</div>
</template>
```
你可以根据需要调整每个 el-col 元素的 span 属性以及其他样式属性来实现不同的布局效果。
相关问题
控制el-col是否显示
您可以使用v-if或v-show指令来控制el-col是否显示。这两个指令的用法有所不同。
如果您使用v-if指令,您可以在el-col元素上添加一个条件表达式,只有当该表达式返回true时,el-col才会被渲染到DOM中。例如:
```html
<el-col v-if="showCol">内容</el-col>
```
在这个例子中,只有当showCol为true时,el-col才会被显示。
另一种方法是使用v-show指令。与v-if不同,v-show只是通过CSS样式来控制元素的显示和隐藏,而不会将元素从DOM中删除。例如:
```html
<el-col v-show="showCol">内容</el-col>
```
在这个例子中,当showCol为true时,el-col会显示;当showCol为false时,el-col会隐藏。
请注意,在性能方面,如果需要频繁切换显示和隐藏,使用v-show会比v-if更高效一些。
<el-row> <el-col :span="12"> </el-col> <el-col :span="12"> </el-col> </el-row>怎么再将el-col分成1:2的两部分
你可以在每个 `el-col` 中再嵌套一个 `el-row`,然后在其中分别再添加两个 `el-col`,并设置它们的 `span` 属性为6和12,代码如下:
```
<el-row>
<el-col :span="12">
<el-row>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
</el-col>
</el-row>
```
这样,每个 `el-col` 就被分成了两个宽度比例为1:2的部分。