element穿梭框最后一行显示长度不一致问题

测试狂人

于 2021-07-30 17:15:51 发布

阅读量895

点赞数

分类专栏：前端开发文章标签： css html vue.js

本文为享有盛誉之名博主原创文章，未经博主允许不得转载。除非给我打钱，在征求本人同意即可。

本文链接：https://blog.youkuaiyun.com/bbs11007/article/details/119252147

版权

本文探讨了在使用Element UI穿梭框时遇到的最后一行显示内容长度不一致的问题。通过检查HTML和CSS样式，发现宽度设置可能造成这一现象。解决方案是将宽度从百分比改为固定值，例如139px，而无需修改Element原框架，只需在当前HTML页面添加自定义CSS样式即可修复。

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

我们看看我们的穿梭框

很明显最后一行显示的内容比上一行的内容多，这是怎么回事？查看样式都没有查到什么原因。

我们的html：

<--主要要class生效，id不生效-->
<div class="bottomchoose" id="bottomchoose" style="margin-left:0.2rem;margin-top: 0.3rem;"> 
                <el-transfer
                    filterable
                    filter-placeholder="请输入查找的终端"
                    v-model="value"
                    :titles="['全选-选择终端','全选-已选择']"
                    :button-texts="['移出','添加']"
                    :data="data_d"
                    :render-content="renderFunc"
                    v-loading="loading2"
                    element-loading-text="获取数据中...请耐心等待ÿ