element-UI Transfer(穿梭框)组件 改变宽高

工作需要改变 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改变了宽高

我是看这个文章解决的

https://www.cnblogs.com/mogujun/articles/12293654.html