el-transfer组件自定义左右列表宽度

el-transfer组件自定义左右列表宽度

我们知道element-ui 是自带样式的，但是有时候我们需要覆盖掉它们自带的样式，比如自定义el-transfer列表宽度

1首先打开后台信息，看看自己想要修改的样式的类

2 在style标签中修改相关的样式，注意不要加上scope

3 在element-ui 标签上加上相应的选择器，防止样式污染全局，同时加大优先级

举个例子：

实现el-transfer组件自定义左右列表宽度

打开控制台发现两列的宽度是在el-transfer-panel 这个类中定义的

所以，我们要覆盖它的样式：

<style>

.transfer-class .el-transfer-panel{

  border: 1px solid #ebeef5;

  border-radius: 4px;

  overflow: hidden;

  background: #fff;

  display: inline-block;

  vertical-align: middle;

  width: 250px;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  position: relative;

}

</style>

其中transfer-class是我们自己添加的样式