设置 el-transfer 组件的高度 ElementUI

最新推荐文章于 2025-04-03 14:45:11 发布

十月ooOO

最新推荐文章于 2025-04-03 14:45:11 发布

阅读量3.6k

点赞数 1

分类专栏： # element 文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/KimBing/article/details/126370672

版权

element 专栏收录该内容

14 篇文章

订阅专栏

设置 el-transfer 组件的高度 ElementUI

默认情况下，el-transfer 的高度并不高，但项目中需要他高点，只需要写一个覆盖样式的样式即可。

默认的高度

在这里插入图片描述

覆盖样式

SCSS 代码，主要修改的是里面 .el-transfer-panel__header 和 .el-transfer-panel__body 的样式，用 !important 覆盖比较保险。
这样，给 el-transfer 添加 .transfer-high 这个 class 即可

// Transfer Element
.el-transfer.transfer-high{
  .el-transfer-panel{
    &__header{

    }
    &__body{
      height: 600px !important;
      .el-transfer-panel__list{
        height: 600px - 60 !important;
      }
    }
  }
}