element-ui如何实现这种布局

Question

第一次用element布局 不太会 看文档上写的 用el-row el-col应该可以实现 但是没有写出图片上这种效果 左边文字跟右边格子在一行，然后右边格子自动换行 换行之后是对齐的 里面还有单选框和复选框

Answer 1

    <el-row :gutter="20">
      <el-col :span="3">00000:</el-col>
      <el-col :span="21">
        <el-row :gutter="20">
          <el-col :span="6"><el-card>1111</el-card></el-col>
          <el-col :span="6"><el-card>2222</el-card></el-col>
          <el-col :span="6"><el-card>3333</el-card></el-col>
          <el-col :span="6"><el-card>4444</el-card></el-col>
          <el-col :span="6"><el-card>5555</el-card></el-col>
        </el-row>
      </el-col>
    </el-row>

这样的效果应该和你要求的一样，再按照需要循环一下就行

Answer 2

可以再用

<el-form>
    <el-form-item lable="任务列表">
        <el-row>
            <el-col v-for="item in list" :offset="4">
            </el-col>
        </el-row>
    </el-form-item>
</el-form>

但是更建议你右边用flex