element-ui实现一个动态布局的对话框

 我把组件上传到npm了，具体使用方法请看：https://gitee.com/zengyanfang/tablelist-way/blob/master/README.md#%E5%8F%82%E6%95%B0

前言：在工作中有各种各样的对话框，最多就是填写信息这些的，一般这样的内容都是el-input输入框，el-select选择框等等之内的，这时我们就可以封装成一个组件，想要什么内容就传一个json配置，像其他组件那样，这样可以极大的简化开发，不至于每次都要去写el-input这些细微根节的东西，那问题来了

问题：就是布局，元素少还好，要是多的话，比如有几个输入框，几个选择框，又有几个多选框等等，那就是一排排的排下来难看死了，

解决：我自己琢磨了好久，改进了好多遍，终于是搞出来一个这样的，判断当元素也就是输入框选择框这些加起来大于4个的话就改为一行两个，如图 

 当四个的时候

当大于四个的时候

虽然我觉得这样也没有多好看，但比一行一个的好看多了，没办法，封装组件就是这样，细节很难各个把控到位

 有些东西就是那么长，比如这个待缴费金额，光字就五个，如果它所在行搞成两个的话，就太狭小了，所以我除了组件灵活布局外，参数还可以配置是否独占一行，所以当自己可以设置独占一行的时候问题就来了，没有外界的干扰下，我组件布局的逻辑是，元素大于4个时就添加一个class到根元素上，设置下面元素的宽度为50%，display为inline-block，再判断元素个数是否为奇数，为基数最后一个就独占一行，但是我给某个元素设置了独占一行的属性，那它的判断就不准确了，所以最后一个就不会独占一行了，而且设置的独占一行的元素在中间的话还会影响上面的元素，因为如果设置的独占一行的元素是偶数时说明它上面还有一个宽度为50%的元素，所以这个时候又要判断，总之至少要三种判断，话不多说，贴代码

组件代码

<template>
  <div _wid="wdialog">
    <el-dialog :fullscreen="fullscreen || fullscreen1" :class="{mobile:fullscreen,noMobile:!fullscreen}"
      :visible.sync="openSenior1">
      <template slot="title">
        <slot name="title">
        </slot>
        <template v-if="!fullscreen">
          <i v-show="!fullscreen1" class="el-icon-full-screen full" @click="fullscreen1=true"></i>
          <svg-icon icon-class="qxpp" v-show="fullscreen1" class="qxqp full" @click="fullscreen1=false"></svg-icon>
        </template>
      </template>
      <el-form v-if="options1" :validate-on-rule-change="false" :model="content"
        :class="[options1.length<=4?'senior1':'senior2']" :rules="rules" ref="formSenior">
        <el-form-item v-for="(item,index) in options1" :class="{w100:item.yes}" :label="item.label" :prop="item.name">
          <repeat :content="content" v-model="content[item.name]" :item="item"></repeat>
        </el-form-item>
        <el-form-item label="" class="footer">
          <el-button type="primary" @click="submit1('formSenior')">{
  {confrimLabel}}</el-button>
        </el-form-item>
      </el-form>
      <slot></slot>
    </el-dialog>
  </div>
</template>

<script>
  import repeat from "@/components/topOperation/components/repeat.vue"
  import {
    deepClone,
    judgeType
  } from "@/utils/deepCl