可以封装 <el-row> 实现行容器的组件吗
Closed this issue · 2 comments
Zhwt commented
你好! 是否可以考虑实现 <el-row>
行容器这个东西, 或者是把<el-row>
也单独封装成一个组件, 比如现在需要布一个这个样子的局, 就是一行和另一行不对齐的情况:
+--------+-------+
| 输入框 | |
+--------+ |
| 输入框 | 图片框 |
+--------+ |
| 输入框 | |
+--------+-------+
假设这里的输入框和图片框的宽度都是 12, 现在使用 #10 中给出的解决方法, 使用 layout 控制宽度的话会变成这样:
+--------+-------+
| 输入框 | |
+--------+ |
| 图片框 |
| |
| |
+--------+-------+
| 输入框 | 输入框 |
+--------+-------+
如果用行容器这种模式的话可以变成是一行, 左右各有一个宽 12 的行容器, 左边的行容器里有 3 个输入框, 每个宽度都是 24, 右边的是一个图片框, 这样的话正好两边就是一样高的, 最后生成的代码应该类似这样:
<row>
<row span="12">
<input />
<input />
<input />
</row>
<row span="12">
<image/>
</row>
</row>
第二个图那个错位的布局使用的 formDesc:
{
key_1587437729999: {
label: "单行输入框",
type: "input",
layout: 12
},
key_1587437739302: {
label: "上传图片",
type: "image-uploader",
attrs: {
fileType: [],
action: "https:\u002F\u002Fwww.mocky.io\u002Fv2\u002F5cc8019d300000980a055e76"
},
layout: 12
},
key_1587437746662: {
label: "单行输入框",
type: "input",
layout: 12
},
key_1587437760580: {
label: "单行输入框",
type: "input",
layout: 12
}
}
dream2023 commented
正在进行重构,会考虑的
dream2023 commented
鉴于架构原因,这个项目不做实现,会在另外一个组件中实现