iview组件的Table表格的内容过多时，显示title提示

在iview的Table表格中，如果数据超出当前列的宽度，多余的部分会折行显示，使得该行的高度增加。为了实现*

文本将不换行，超出部分显示为省略号

的效果，iview提供了表头属性ellipsis。然而这个属性却有一个弊端，就是显示为省略号的部分对用户来说是不可见的，非常影响体验，而且在iview文档中，作者并未给出任何解决办法。
最简单的解决办法是给相关数据增加title属性，使得鼠标移入时可以显示全部信息。在SegmentFault上找到了相关代码

要在column中的--表格列的配置--描述添加
注意area的值，后面也要相应对应是area的值，否则找不到data中的area的值，就会报错。

render: (h, params) => {

return h('div', [

h('span', {

style: {

display: 'inline-block',

width: '100%',

overflow: 'hidden',

textOverflow: 'ellipsis',

whiteSpace: 'nowrap'

domProps: {

title: params.row.courseName

}

}, params.row.courseName)

])

}

作者：曼珠沙华_521b
链接：https://www.jianshu.com/p/23152ef738bf
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

iview组件的Table表格的内容过多时，显示title提示相关推荐

android studio table居中代码_html table表格标签内容如何居中显示？表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
html table表格标签内容如何居中显示？表格的align属性的用法介绍
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
小技巧--table表格td内容垂直居中方法
小技巧–table表格td内容垂直居中方法前端页面编写时,table表格排版时最容易遇到的,就是单元格内的内容无法居中,又不能写行高时,可以使用以下方法: table td {vertical-al ...
基于iview2/3组件的Table表格树展开/折叠
基本iview2/3组件的Table表格树折叠展开,其实就是展开的时候插入行,收缩的时候删除行 {title: '名称',key: 'name',minWidth: 200,ellipsis: tru ...
HTML中如何让表格的内容不换行显示
在默认情况下,表格的内容可能会换行显示,那如果我们不想它换行显示该怎么办呢?下面将提供两种方法来实现不换行效果. 方法1:为td标签加上nowrap属性 nowrap n. 禁止文字自动换行 < ...
elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
iview ui里面 table表格title提示和气泡提示
iview--table表格title提示和气泡提示说明: 文本不换行,超出显示省略号,两种提示方式,title提示和气泡提示气泡提示不足:当内容没超过一行,也会出现气泡提示.觉得不如Elemen ...
IVIEW组件中Table单元格可编辑、加入各种图表
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:https://gitee.com/wlovet/table-project 一.Render函 ...
antd4 table里面表单赋值_vue的组件化——table表格的封装
什么是组件化--组件化是vue.js中的重要思想之一,也是vue的一个强大功能.它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用:任何的应用都可以被抽象成一个组件进行复用. ...

iview组件的Table表格的内容过多时，显示title提示

iview组件的Table表格的内容过多时，显示title提示相关推荐

最新文章

热门文章