項目場景：

有時候使用element的el-checkbox-group多個el-checkbox內(nèi)容折行后不對齊，如下圖所示：

解決方案：

可以用樣式來調(diào)整（可以限制每行展示的個數(shù)）

實現(xiàn)代碼：

<el-form-item label="地域設(shè)置：" 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;
}
/* 用來調(diào)整每一項的寬度 */
.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"

最終效果圖：