美文网首页
el-transfer高度(element版本2.13.0)

el-transfer高度(element版本2.13.0)

作者: blank_lion | 来源:发表于2020-01-06 10:57 被阅读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%;
}

相关文章

网友评论

      本文标题:el-transfer高度(element版本2.13.0)

      本文链接:https://www.haomeiwen.com/subject/bfghactx.html