el-transfer高度(element版本2.13.0)

包含关系:

<el-transfer-panel>
  <el-transfer-panel__header></el-transfer-panel__header>
  <el-transfer-panel__body>
    <el-transfer-panel__filter><el-transfer-panel__filter>
    <el-transfer-panel__list></el-transfer-panel__list>
    <el-transfer-panel__empty></el-transfer-panel__empty>
    <el-transfer-panel__footer></el-transfer-panel__footer>
  </el-transfer-panel__body>
</el-transfer-panel>

<el-transfer>
  <el-transfer-panel></el-transfer-panel>
  <el-transfer-buttons>
    <el-transfer__button></el-transfer__button>
    <el-transfer__button></el-transfer__button>
  </el-transfer-buttons>
  <el-transfer-panel></el-transfer-panel>
</el-transfer>

css:

.table-custom-drawer {
  height: 100%;
}
.drawer {
  height: 100%;
}
.drawer /deep/ .el-drawer__body {
  height: 100%;
}
.table-column-transfer {
  height: calc(100% - 160px);
  width: 100%;
  margin: 10px;
}
.table-column-transfer /deep/ .el-transfer-panel {
  height: 100%;
  width: 230px;
}
.table-column-transfer /deep/ .el-transfer-panel__header {
  height: 40px;
}
.table-column-transfer /deep/ .el-transfer-panel .el-transfer-panel__body {
  height: calc(100% - 40px);
}
.table-column-transfer /deep/ .el-transfer-panel__list {
  height: 100%;
}
.table-column-transfer /deep/ .el-transfer__buttons {
  margin: 10px;
  padding: 0px;
}
.table-column-transfer /deep/ .el-transfer__button {
  padding: 10px;
  width: 35px;
  height: 35px;
}

采坑:
按百分比设置高度后,el-transfer选择框列表的高度显示总是有问题,原因为本例中el-transfer置于el-drawer中,需要设置el-drawer__body的高度

.drawer /deep/ .el-drawer__body {
  height: 100%;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容