Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

可以封装 <el-row> 实现行容器的组件吗 #32

Closed
Zhwt opened this issue Apr 21, 2020 · 2 comments
Closed

可以封装 <el-row> 实现行容器的组件吗 #32

Zhwt opened this issue Apr 21, 2020 · 2 comments
Labels
enhancement New feature or request

Comments

@Zhwt
Copy link

Zhwt commented Apr 21, 2020

你好! 是否可以考虑实现 <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 dream2023 added the enhancement New feature or request label Apr 21, 2020
@dream2023
Copy link
Owner

正在进行重构,会考虑的

@dream2023
Copy link
Owner

鉴于架构原因,这个项目不做实现,会在另外一个组件中实现

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants