首页 > 其他分享 >element ui的表格内容hover展示两行的写法

element ui的表格内容hover展示两行的写法

时间:2022-11-11 13:36:59浏览次数:49  
标签:hover space tooltip element ui overflow row

 

使用之前去掉 show-overflow-tooltip

无法设置hover状态时的样式,改用 el-tooltip

<el-table-column label="核心使用场景" min-width='300'>
<template scope="scope">
<el-tooltip effect="dark" placement="top">
<div v-text="
'开始时间:'

scope.row.useScene" slot="content" style="{width:'220px';white-space:pre-line;word-break:break-all;}"></div>
<div class="oneLine">{{scope.row.useScene}}</div>
</el-tooltip>
</template>
</el-table-column>

.oneLine {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

标签:hover,space,tooltip,element,ui,overflow,row
From: https://www.cnblogs.com/czb1218/p/16880201.html

相关文章

  • 如何使用element-plus中的icon
    全局安装和自动按需安装后的使用方法:到官网图标集合:https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88点击图标复制,直......
  • nuxt3引入element-plus的三种方法
    1、全部引入安装element-plus依赖npminstallelement-plus--save在nuxt3项目中plugins下新建一个element-plus.client.ts文件 在element-plus.client.ts文件中输......
  • stable-diffusion-webui+NovelAI+Python+Git+CUDA本地部署(2G显存,使用cpu运行)
    参考原文1:https://blog.csdn.net/weixin_62651190/article/details/127666631参考原文2:https://blog.csdn.net/yefufeng/article/details/127719952环境准备Python:3.10.......
  • [Typescript] 95. Hard - Required Keys
    Implementtheadvancedutiltype RequiredKeys<T>,whichpicksalltherequiredkeysintoaunion.ForexampletypeResult=RequiredKeys<{foo:number;bar?:......
  • vue-element-admin install error
    vue-element-admininstallerror#安装nodejsdnfmoduleresetnodejsdnfmoduleinstallnodejs:16npminstall-gpnpmvi~/.npmrc粘贴以下3行registry=http:/......
  • Mysql 为现有数据生成Guid
    Mysql为现有数据生成Guid GUID全局唯一标识符(GUID,GloballyUniqueIdentifier)是一种由算法生成的二进制长度为128位的数字标识符。GUID主要用于在拥有多个节点、多......
  • elementui中el-checkbox 选中时的详细介绍
    checkbox-group把多个checkbox管理为一组(需要注意的坑)很多时候我们需要会遇见这样的场景。比如用户需要选择多个值.这个时候我们需要把多个checkbox放置在checkbox......
  • MYSQL给ID设置默认值为UUID
    MYSQL给ID设置默认值为UUID标签: mysql  id  触发器  默认值      由于mysql并不支持默认值为函数类型,给id设值有两种方式:(1)通过后台在执行插入......
  • uuid
    Forthecreationof RFC4122 UUIDsComplete -SupportforRFC4122version1,3,4,and5UUIDsCross-platform -Supportfor...CommonJS, ECMAScriptMo......
  • [Typescript] 93. Hard - Get Required
    Implementtheadvancedutiltype GetRequired<T>,whichremainsalltherequiredfieldsForexampletypeI=GetRequired<{foo:number,bar?:string}>//exp......