el-transfer默认宽度是200px
在内容较长的时候,无法展示完全
在这里插入图片描述
需要修改该组件的宽度

处理方法是
采用定位组件的方法,通过组件外层的class或id定位,使用 >>> 进行样式穿透。

在el-transfer 外套一个div class为edit_dev

        <div class="edit_dev">
          <el-transfer
            v-loading="transLoading"
            filterable
            filter-placeholder="搜索"
            v-model="value"
            :data="transData"
            :titles="['未选择', '已选择']">
          </el-transfer>
        </div>

添加样式 注意需要 scoped 没有scoped时会不生效

<style scoped>
   .edit_dev >>> .el-transfer-panel {
     width:350px;
   }
</style>

在这里插入图片描述
效果实现

参考链接
https://www.jianshu.com/p/506fe5057179
在此表示感谢

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐