专栏首页acoolgiser_zhuanlanelement 表格内容过长时设置隐藏,通过popover弹窗显示

element 表格内容过长时设置隐藏,通过popover弹窗显示

一、 首先看效果图:

 二、示例代码:

<el-table-column prop="safetyRisk" label="安全隐患" width="200">
    <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="安全隐患"
            width="300"
            trigger="hover"
          >
            <div>{{ scope.row.safetyRisk }}</div>
            <span slot="reference">{{
              scope.row.safetyRisk.substr(0, 30) + "..."
            }}</span>
          </el-popover>
    </template>
</el-table-column>

参考 https://www.jianshu.com/p/7e7b65b99f3d

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BootStrap应用开发学习入门1

    什么是字体图标? 答:字体图标是在 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。

    WeiyiGeek
  • Vue2.x自定义桌面端弹框组件VLayer

    怎么样,是不是看着很眼熟,没错!在设计之初参考借鉴了Layer弹框插件、Element-UI、iView等组件化设计思想。

    andy2018
  • 【Vue.js】Vue.js组件库Element中的弹出框、气泡确认框、卡片和走马灯

    Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解...

    魏晓蕾
  • 基于 HTML5 Canvas 的拓扑组件 ToolTip 应用

    ToolTip 效果是网页制作中常见的使用特效。当用户将鼠标悬浮在某个控件上时,ToolTip 显示并向用户展示相应的提示信息;当鼠标离开时,ToolTip 隐...

    HT for Web
  • Mac开发基础练习:制作一个状态栏(NSStatusBar)上的App(二)

    1.1 选中ViewController.m文件,添加鼠标左键点击事件监听,实现代码如下图:

    代码行者
  • 【Vue.js】Vue.js组件库Element的基础用法

    Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是帮助网站快速成型的工具。

    魏晓蕾
  • 使用组件的state机制实现屏幕取词

    望月从良
  • 加点JavaScript魔法

    在深入研究客户端之前,让我们先了解一下支持这些用户弹窗所需的服务器端的工作。用户弹窗的内容将由新路由返回,它是现有个人主页路由的简化版本。视图函数如下:

    公众号---人生代码
  • BOOtstrap源码分析之 tooltip、popover

    一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

    sam dragon

扫码关注云+社区

领取腾讯云代金券