el-transfer设置多列

要在el-transfer中设置多列，可以通过重写组件的方式来实现。首先，创建一个组件，继承自element-ui的Transfer组件。

然后，根据需求修改组件的源码。如果页面上存在很多数据，会导致页面卡顿，可以考虑对源码进行优化。可以通过减少DOM的数量来提高性能。

可以尝试修改CSS样式来实现多列布局。可以给父容器设置宽度为100%，然后使用overflow:auto属性来实现滚动，还可以使用position:relative属性来设置子元素的位置。可以使用calc函数来计算高度，以适应不同的情况。

另外，还可以使用/deep/选择器来修改el-transfer-panel__list的样式，将高度设置为unset。可以使用/deep/选择器来修改el-transfer-panel__item.el-checkbox的样式，可以调整标签的行高。

通过以上的修改，可以实现el-transfer的多列设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [【vue2】element-ui el-transfer扩展 实现多列效果一对多](https://blog.csdn.net/qq_33002083/article/details/129128719)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [el-transfer 数据量大时使用虚拟列表](https://blog.csdn.net/qq_39211165/article/details/116035060)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]