grid表单布局方案

scss

.form-layout {
  $max-columns-count: 12;
  display: grid;
  grid-template-columns: repeat($max-columns-count, 1fr);
  grid-row-gap: 0;
  grid-column-gap: 32px;
  &__column {
    grid-column: span 1;
  }
  @for $i from 2 through $max-columns-count {
    &__column#{$i} {
      grid-column: span $i;
    }
  }
}

use

<el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    class="demo-ruleForm"
  >
    <div class="form-layout">
      <el-form-item label="借用人 :" prop="tenant" class="form-layout__column4">
      </el-form-item>
      <div class="form-layout__column8"></div>
      <el-form-item
        label="借用时间 :"
        prop="borrowTime"
        class="form-layout__column4"
      >
      </el-form-item>
      <el-form-item
        label="归还时间 :"
        prop="returnTime"
        class="form-layout__column4"
      >
      </el-form-item>
      <el-form-item
        label="借用原因 :"
        prop="borrowingCauses"
        class="form-layout__column12"
      >
      </el-form-item>
    </div>
  </el-form>