el-checkbox多个选项时排列对齐

问题描述：

当使用el-checkbox时，有多个选项时列表没有对齐，间隔太小，页面非常的不美观。

先看一下修改之前的代码：

<el-col style="height: 51px;" :xs="24" :sm="24" :lg="24">
  <el-form-item label="会议物品" prop="meetingGoods">
    <el-checkbox-group v-model="meetingGoods" style="width: 100%" @change="submit">
      <el-checkbox v-for="item in sup_this.meetingGoodOption" :key="item.value" :label="item.value">
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :lg="24">
  <el-form-item label="特约服务" prop="serveClass">
    <el-checkbox-group v-model="serveClass">
      <el-col v-for="item in sup_this.serveClassOption" :key="item.value" :span="4">
        <el-checkbox :label="item.value">
          {{ item.label }}
        </el-checkbox>
      </el-col>
    </el-checkbox-group>
  </el-form-item>
</el-col>

解决方法：

根据上述代码，第一个错误的地方就是把el-col的高度设为了固定的51px，导致两个字段之间的间距过短，其次就是选项之间没有对齐，需要给每一个选项设定一个宽度，这里我使用的是el-col的:span的属性将每个选项设置一个相同的宽度来达到对齐的效果。 这样就美观了很多，看一下修改后的代码：

<el-col :xs="24" :sm="24" :lg="24">
  <el-form-item label="会议物品" prop="meetingGoods">
    <el-checkbox-group v-model="meetingGoods">
      <el-col v-for="item in sup_this.meetingGoodOption" :key="item.value" :span="4">
        <el-checkbox :label="item.value">
          {{ item.label }}
        </el-checkbox>
      </el-col>
    </el-checkbox-group>
  </el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :lg="24">
  <el-form-item label="特约服务" prop="serveClass">
    <el-checkbox-group v-model="serveClass">
      <el-col v-for="item in sup_this.serveClassOption" :key="item.value" :span="4">
        <el-checkbox :label="item.value">
          {{ item.label }}
        </el-checkbox>
      </el-col>
    </el-checkbox-group>
  </el-form-item>
</el-col>