携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天 点击查看活动详情

前言

开始新的专栏，记录一下在使用Element UI过程中遇到的一些问题以及总结一些有用的地方，最近对这个后台框架非常感兴趣，工作中也独立地开始用到它，但是自己是一个新手错误难免，欢迎指正。

穿梭框

在做一个表单筛选的时候，需要给后台传递一个列表。列表选项需要在一个300多个中筛选，于是在Element UI中找到穿梭框这个组件，这个组件比较冷门，感觉用得不多，就是下面这个Transfer：

在实际开发场景中，左边的列表显示的内容横向的宽度很长，需要调试一下，我就直接找到这个左边的列表的元素

我想把这个元素宽高直接扩大：

.el-transfer-panel {
  width:500px;
  height: 1100px;
}

完全没有效果，结果去找资料，这里真实想吐槽一下百度，首页一大堆坑爹的教程，去修改node_modules里面的CSS文件，我在想这个node_modules不是通过npm install 把第三方包下载下来编译出来的吗？换了一个环境再执行npm install不又还原了吗？难道在生产环境中去修改node_module里面的代码吗？这不是扯淡吗？

接着在掘金里面搜索总算找到了解决方案。在这个el-transfer-panel外层元素设置一个class，在外层class穿透进行定位修改元素大小

<style scoped>
.edit_dev >>> .el-transfer-panel {
  width:500px;
  height: 1100px;
}
.edit_dev >>> .el-transfer-panel__list.is-filterable{
  height: 1200px;
}
</style>

完成后的效果：

总结

虽然是一个小BUG，但是还是遇到了一个小问题，在我自己的代码中style样式标签中有一个lang="scss"这也导致了修改无效，把它删掉，或者新建一个在没有这个代码的style样式标签中写CSS就行了。