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

最新推荐文章于 2024-07-05 16:16:53 发布

Reset the brain

最新推荐文章于 2024-07-05 16:16:53 发布

阅读量999

点赞数 9

文章标签： vue.js

版权

本文介绍了如何修改el-cascader组件的样式，使其在选择数据时不自动撑高，保持布局一致。通过设置高度、行高、max-width和特定CSS属性，解决了清空按钮易误触的问题，确保了组件在视觉和操作上的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们在页面上使用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组件在视觉效果与其他组件一致，在操作上与未修改时一致了。