el-transfer高度(element版本2.13.0)

2020-01-06  本文已影响0人  blank_lion

包含关系:

<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%;
}
上一篇 下一篇

猜你喜欢

热点阅读