使用Element-UI transfer穿梭框在屏幕下鼠标悬浮显示完整信息
HTML内容 添加 :render-content="renderContent"
<template>
<div>
<el-transfer filterable
v-model="localCurrentBoundAccount"
:data="data"
@change="dataChange"
:titles="titles"
:render-content="renderContent"
ref="transfer">
</el-transfer>
</div>
</template>JavaScript中添加方法
renderContent(h, option) {
return (
<el-tooltip class="item" effect="dark" content={option.label} placement="top">
<span>{option.label}</span>
</el-tooltip>
)
}CSS样式：
/* 添加新的样式 */
::v-deep .el-transfer-panel__item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
主要修改说明：
1. 添加了:render-content="renderContent"属性来自定义渲染内容
2. 实现了renderContent方法，使用el-tooltip组件来实现悬浮展示完整内容
3. 添加了样式控制，确保内容超出时显示省略号
这样修改后：
- 当鼠标悬浮在被截断的账号上时，会显示完整的账号信息
- 保持了原有的响应式布局
- 提升了用户体验，方便用户查看完整账号信息