【element-ui】elementUI，穿梭框，调节宽度

Z时代
2024-01-10
分类：技术分享

由于显示的了内容太长，穿梭框中的内容显示不全，不知道能不能把宽度调宽一点，或者当鼠标放到某行的时候，此行内容显示完全。

1、是否可以将宽度条调宽
2、是否可以变成下图这个样子（当鼠标放上去的时候，剩余内容显示完全）

感谢！

回答：

1、可以将宽度调宽。ElementUI的样式是可以被覆盖的，只要你权重大于它，例如你这个穿梭框使用<el-transfer v-model="value1" :data="data"></el-transfer>，那么它将会有一个名为.el-transfer的class，你可以给这个class重新编写样式，这里需要注意就是权重问题，最好把它的父盒子一并写上，例如：div.demo .el-transfer {width: 500px;}。
2、宽度调整以后，若还是太长，倒也可以设置溢出显示省略号，同时在定义一个溢出显示且z-index值高一点儿的class，利用鼠标移入移出来控制class的切换。