css overflow 省略号点点点与 鼠标悬浮显示可以绑定事件:title 也可以在table状态下用 element-ui里面的方法替代
2019-06-12 19:19
3239 查看
原来是用css和jsappend内容写的代码
现在可以用:
用的是:title方法 :title=“item.enterpriseBaseInfo.name||‘暂无’” title里面的内容是标签内动态加载的内容
<el-col :span="10" :title="item.enterpriseBaseInfo.name||'暂无'" >{{item.enterpriseBaseInfo.name||'暂无'}}</el-col>
在 css中写的是:
.el-col-8,.el-col-7,.el-col-6,.el-col-10{ overflow: hidden; text-overflow: ellipsis; // display: -webkit-box; display:block; -webkit-line-clamp: 1; white-space:nowrap; -webkit-box-orient: vertical; }
在table状态下其实可以用element里面封装好的方法: show-overflow-tooltip
<el-table-column prop="content" label="短信内容" :width="400" show-overflow-tooltip> <template slot="header"> <span class="table-header">短信内容</span> </template> </el-table-column>
会自动检测是否超出 并且超出后t鼠标悬停会自动出现完整的内容,如以下:
相关文章推荐
- 监听element-ui table滚动事件的方法
- elementui el-table 单元格是图标,鼠标划入显示文字
- PS实用技巧:用原始图片制作显示(正常状态)、鼠标悬浮(hover)、鼠标点击(pressed)的方法
- Apple 移动设备绑定动态生成元素点击事件$(document).on('click',element,callback)失效解决方法
- css实现table中td单元格鼠标悬浮时显示更多内容
- easyui datagrid内容显示不完用省略号代替,并设置title悬浮显示全部内容
- vue+elementui怎样点击table中的单元格触发事件--弹框
- 【UE4】【C++】枚举类(对于不同状态显示不同的颜色准心)C++设置状态,蓝图设置颜色(UI颜色绑定)
- elementUI el-table-column 省略号不生效
- 表格超出部分省略号显示,鼠标悬浮显示全部
- vue elementUI table表格数据 滚动懒加载的实现方法
- mapabc高德地图显示多个点,并且每个marker点可以响应鼠标点击事件,处理跳转页面
- canvas绑定事件的时候 获得鼠标点击的地方在canvas画布内的坐标的方法
- jquery绑定click等事件无效解决方法live替代$().click不执行
- android map高德地图显示多个点,并且每个marker点可以响应鼠标点击事件,处理跳转页面
- GridView的技巧 绑定行事件,取得单元格值,或取得单元格控件方法,鼠标经过样式
- datalist 的用法。也是增删改查,但是比较智能。用数据绑定的方式,可以有不同的显示方法,下面是对一个表的增删改查的参考代码
- CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效 禁止文本换行
- 【转】Android中的IOC框架,完全注解方式就可以进行UI绑定和事件绑定
- 前台JS:通过Hover(鼠标悬停事件)动态悬浮显示DIV的ID