解决多个el-checkbox内容折行对不齐问题（可以限制每行展示的个数）

项目场景：

有时候使用element的el-checkbox-group多个el-checkbox内容折行后不对齐，如下图所示：

---

解决方案：

可以用样式来调整（可以限制每行展示的个数）

实现代码：

<el-form-item label="地域设置：" prop="regionIdList" class="region-list-style">
 <el-checkbox-group v-model="userForm.regionIdList">
    <el-checkbox
      :label="item.name"
      v-for="item in azonesListData[1]"
      :key="item.id"
      :disabled="item.status === 1"
      class="region-list-item"
      :title="item.name">
      <span>
        {{ item.name.length > 10 ? item.name.substring(0, 10) + '...' : item.name }}
      </span>
    </el-checkbox>
  </el-checkbox-group>
</el-form-item>

css代码：

<style scoped>
/* 用来对齐 */
.region-list-style /deep/ .el-checkbox + .el-checkbox {
  margin-left: 0px;
}
.region-list-style /deep/ .el-checkbox {
  margin-right: 25px;
}
/* 用来调整每一项的宽度 */
.region-list-item {
  width: 150px;
  white-space: nowrap;
  /* text-overflow: ellipsis; */
  overflow: hidden;
}
</style>

代码解释：

1. 最多展示10个字符，多了被截断

{{ item.name.length > 10 ? item.name.substring(0, 10) + '...' : item.name }}

2. 鼠标悬停后展示全部

:title="item.name"

最终效果图：