使用Element-UI transfer穿梭框在屏幕下鼠标悬浮显示完整信息_tooltip 不能在穿梭框内使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47255575/article/details/144578472

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. 添加了样式控制，确保内容超出时显示省略号

这样修改后：
- 当鼠标悬浮在被截断的账号上时，会显示完整的账号信息
- 保持了原有的响应式布局
- 提升了用户体验，方便用户查看完整账号信息