修改vue element Transfer 穿梭框里内容区的宽度

修改vue element Transfer 穿梭框里内容区的宽度

<template>
　　<el-transfer v-model="value1" :data="data"></el-transfer>
</template>

步骤：

1.在界面工程的文件夹下搜索transfer，找到transfer组件的文件夹，有两个文件。

2.在工程中全文搜索.el-transfer-panel，找到定义这个类的地方，修改宽度。

3.在\vue-admin-master\node_modules_element-ui@2.4.6@element-ui\lib\theme-chalk\index.css搜索.el-transfer-panel这个类

4. 在\vue-admin-master\node_modules_element-ui@2.4.6@element-ui\lib\theme-chalk\index.css搜索.el-transfer-panel 将这个类=> .el-transfer-panel，
   //将width从200px改成width:500px; .el-transfer-panel__body中 height： 246px 改为 446px
   //.el-transfer-panel__list.is-filterable height: 194px改为 height: 394px;

5.亦可在控制台测试判定其宽度的类，确定为.el-transfer-panel，再反向搜索.el-transfer-panel的位置进行修改。

转载于:https://www.cnblogs.com/dhpong/p/10500468.html