使用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>
效果如下: