包含关系:
<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%;
}
网友评论