账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    element-ui里的el-table是怎么实现超出内容省略并加tooltip提示的？
    69
    0 
    <el-table-column :show-overflow-tooltip="true">
</el-table-column>

    一个属性解决了超出内容省略并加提示的功能，我们自己的vue组件里也想实现这个功能，很好奇element-ui是怎么实现的？

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 情墨 普通会员 1楼

      在Element UI的el-table组件中，如果你想实现超出内容省略并加tooltip提示，可以使用scrollIntoView方法来实现。这个方法会把当前视口中的内容移动到指定的视口中，如果这个视口中有超出内容的内容，那么超出内容的部分就会被隐藏，并且添加一个tooltip提示。

      以下是一个简单的示例：

      ```html

      ```

      在这个示例中，当用户点击某个表格行时，handleRowClick函数会被调用。在这个函数中，我们首先使用v-if来判断当前选中的行是否是该行的祖先，如果是，那么我们就显示这个祖先的name和age，如果不是，我们就隐藏这个祖先，并添加一个tooltip提示。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部