注意目录和修改相同的字符编码

elementui中的el-row和el-col的使用规范

问题:在el-row标签中,包含了el-col和el-row。结果导致此布局中的表单元素无法使用的问题,如下:
1 <template>
2   <el-row>
3     <el-col :span="8">Column 3</el-col>
4     <el-col :span="8">Column 4</el-col>
5     <el-col :span="8">
6       <el-row>
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

     </el-row> 7 </el-col> 8 </el-row> 9 </template>

结果:活动名称这个输入框无法输入内容。

注意:通常情况下,el-row 应该直接包裹多个 el-col 组件,而不是嵌套另一个 el-row

如果你想在页面中创建嵌套的网格布局,你可以直接在 el-row 中使用多个 el-col,然后在某个 el-col 中再嵌套另一个 el-row 和其内部的 el-col

以下是正确规范的代码:

(1)普通用法:
1 <el-row>
2     <el-col :span="12">内容</el-col>
3     <el-col :span="12">内容</el-col>
4 </el-row>
(2)嵌套用法:
 1 <template>
 2   <el-row>
 3     <el-col :span="8">
 4       <el-row>
 5         <el-col :span="12">Column 1</el-col>
 6         <el-col :span="12">Column 2</el-col>
 7       </el-row>
 8     </el-col>
 9     <el-col :span="8">Column 3</el-col>
10     <el-col :span="8">Column 4</el-col>
11   </el-row>
12 </template>

 

posted @ 2025-04-16 14:46  黑使  阅读(551)  评论(0)    收藏  举报