使用el-checkbox-group时,el-checkbox的数量是动态的,如果checkbox的文本长度不一,看起来会很乱,解决办法,给 el-checkbox 一个固定的宽度。
<el-checkbox-group v-model="xxx" @change="handleCheckedXXXChange"> <el-checkbox class="el-checkbox-width" v-for="x in xxxx" :label="x.id" :key="x.id">{{x.name}} </el-checkbox> </el-checkbox-group>
样式
<style lang="scss" scoped> .el-checkbox-width{ width: 100px; height: 25px; } </style>
效果如下: