修改使el-cascader组件选择内容时不撑高的方法

发布时间:2024-02-05浏览次数:301 次
当我们在页面上使用el-cascader组件时,经常会因为其选择数据时自动撑高而破坏整体的布局,因此我们希望将其修改为和其他元素一样的样式,如下:此时,我们就需

当我们在页面上使用el-cascader组件时,经常会因为其选择数据时自动撑高而破坏整体的布局,因此我们希望将其修改为和其他元素一样的样式,如下:

此时,我们就需要先其样式进行覆盖,经过测试,最终的代码如下:

.el-cascader{
    height: 32px; line-height: 32px;
    .el-cascader__tags{
        flex-wrap: nowrap; display: inline-flex; max-width: 120px;
    }
}

这边使用了max-width属性,而不是使用margin-right:60px,是因为使用margin-right:60px会造成clearable清空很难点中。

以上代码足够使el-cascader组件看起来和其他组件一样了,但是当给el-cascader添加了clearable属性时,我们就会发现其清空按钮不是很好使,容易点不中,因此,还需补充如下代码:

.el-cascader__tags{
    .el-tag{position: relative;}
    input{min-width: 20px;}
}

其中的el-tag的样式position,如果不加,则清空属性不好使,很难点中,而input的样式,则主要在选中一条数据,即框内未被占满时,有用,如果不添加input的样式,则当只选中一条数据时,很难清空。

最后,当选中数据时,其内间距也会有一些问题,我们还需添加如下代码进行一次修正:

.el-input__inner{ height: 30px !important; min-width: 20px;}

通过上述的这些代码,即可使el-cascader组件在视觉效果与其他组件一致,在操作上与未修改时一致了。

扫一扫,在手机上查看