工作需要改变 elementUI中穿梭框的宽度,但是element官方并没有给能直接改变宽高的属性
- 先找到 node_modules/element-ui/lib/theme-chalk/index.css 文件
改变宽度:
- 在index.css文件中查找下面代码
.el-transfer-panel{border:1px solid #EBEEF5;border-radius:4px;overflow:hidden;background:#FFF;display:inline-block;vertical-align:middle;width:200px;max-height:100%;box-sizing:border-box;position:relative}
.el-transfer-panel{border:1px solid #EBEEF5;border-radius:4px;overflow:hidden;background:#FFF;display:inline-block;vertical-align:middle;width:200px;max-height:100%;box-sizing:border-box;position:relative}
- 找到width:200px,将width:200px改成width:xxx px
改变高度 :
- 在index.css文件中查找下面代码
.el-transfer-panelbody{height:246px}.el-transfer-panelbody.is-with-footer{padding-bottom:40px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;
.el-transfer-panel__body{height:246px}.el-transfer-panel__body.is-with-footer{padding-bottom:40px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;
- 将两个 height:246px 都改成 height:xxx px
- 最后需要重启脚手架就能看到Transfer改变了宽高
我是看这个文章解决的