修改element 组件的样式 el-transfer修改宽度

4,081 阅读1分钟

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>

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

参考链接 www.jianshu.com/p/506fe5057… 在此表示感谢