element ui控制一行两个元素

有些ui图会要求我们一行固定展示多少个 我这边要求的是一行展示liangge
直接这样写

css部分

<style scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.el-form--inline .el-form-item {
  flex: 1 0 40%;
  align-items: center;
}
.form-item-full {
  flex: 100% !important;
}
</style>

界面部分可以参考一下我写的

<el-form
  :inline="true" 
   label-width="140px"
   label-position="right"
   :model="formInline"
   class="form">
   <el-form-item label="设置为应用资料库">
       <el-radio-group v-model="formInline.applicationDatabase">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
       </el-radio-group>
   </el-form-item>
   <el-form-item label="开启查询审核应用">
       <el-radio-group v-model="formInline.auditApplication">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
       </el-radio-group>
   </el-form-item>
   <el-form-item label="开启上传审核应用">
       <el-radio-group v-model="formInline.enableUpload">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
       </el-radio-group>
   </el-form-item>
   <el-form-item label="开启下载审核应用">
       <el-radio-group v-model="formInline.enableDownload">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
       </el-radio-group>
   </el-form-item>
   <el-form-item label="开启借阅审核应用">
       <el-radio-group v-model="formInline.openBorrowing">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
       </el-radio-group>
   </el-form-item>
</el-form>

当然 如果你要直接考我的代码
需要在你的组件data中加上我这里用的变量 不然会报错的

formInline: {
   applicationDatabase: 1,
   auditApplication: 1,
   enableUpload: 1,
   enableDownload: 1,
   openBorrowing: 1
},

然后就会变成这样的效果

然后我们可以通过 .el-form–inline .el-form-item的flex: 1 0 40%;来控制 40是一行两个

当我们把四十改成三十

<style scoped>
.el-form--inline .el-form-item {
  flex: 1 0 30%;
  align-items: center;
}
</style>

就成了 一行三个