项目中需要使用到el-button-group组件,通常情况下会如下显示。
还是比较美观的。
但是项目中,需要根据实际情况判断显示的按钮数,有些情况下只有一个按钮,如下图,就会非常丑陋,两边少了边框。
由于el-button-group是父组件,所以没有办法通过v-if来判断(实际上也是可以的,就是把组件内的button数组复制两边,那么代码非常不优雅)。
最后我想到可以以使用css的only选择器来实现,即当el-button-group内部只有一个button的时候,添加上两边的边框即可。
.childButton:only-of-type{
border-left-color: var(--el-color-info-light-5);
border-right-color: var(--el-color-info-light-5);
}
以上的配色需要根据自己实际选择的主题色来替换哦,最后要把group内的button都添加一下.childButton的class类名即可。