之前遇到一个需求，是一个最基本的需求了。
要求在table表格中的字段内容超过2行时，省略号展示，鼠标移入到此单元格时，内容展示完整。

1.`鼠标移入后的效果可以通过以下代码实现`

<el-table-column label="位号" width="90" prop="tagNumber" align="center"><template slot-scope="scope"><el-popover placement="top-start" v-elsetitle="位号"width="200"trigger="hover":content="scope.row.tagNumber"><div slot="reference" class="twoLineCls">{{scope.row.tagNumber}}</div></el-popover></template>
</el-table-column>

2.`css`样式

.twoLineCls{text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;
}

完成！！！

不足两行的不显示全部内容，只有超出两行的再显示全部内容

我这边的思路就是：获取dom的高度，如果是超出隐藏的，则高度会是一个固定值，除了此值以外的都默认为不足两行的情况。

下面的标签是antd的，如果是element的，则需要改动一下组件名称，思路是可以参考的。

1.1 插槽展示某一列的内容，注意要给此列添加width固定宽度

我这边发现当超过两行时，元素的高度是39，不超过两行的要么是一行的20高度，要么是两行的40，因此我只需要判断是否高度是39就可以判断出来是否是超出两行的内容了。

这个办法不是很巧妙，但是可以借鉴此思路来进行处理。
还有一个思路就是，通过$refs可以拿到dom，则dom中的内容可以拿到了，如果这个内容跟某个字段的值不完全一样，则表示是超出两行的情况。这个会比较稳妥一点。可以尝试处理一下。

 <divslot="productName"slot-scope="text, record, index"style="max-height: 40px"><div :ref="'productName' + index" class="detailCls"><a-tooltip v-if="productNameStyle[index] == 39"><template slot="title"> {{ text }} </template>{{ text }}</a-tooltip><div v-else>{{ text }}</div></div></div>

1.2 获取到表格数据后，需要对表格中的字段进行判断处理

getProductNameStyle() {this.productNameStyle = [];this.$nextTick(() => {this.list.forEach((list, index) => {let height = parseFloat(window.getComputedStyle(this.$refs['productName' + index]).height);console.log(height);this.productNameStyle.push(height);});});},

elementUi——table表格中字段内容超过2行后，省略号...展示，不超过两行不处理。超过两行再显示全部。相关推荐

python表格绘制斜线表头_在table表格中实现圆角效果
在table中设置border-radius发现不起作用,网上查找了一番,原因是border-collapse:collapse和border-radius不兼容. 设计图效果代码实现效果: #ta ...
elementUI table表格合并相同的内容
elementUI table表格合并相同的内容 1.表格和数据表格是这样数据(由于数据太多,只展示了几个) tableData: [{one: '1 . 产出指标',two: '1 .1 数量指 ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
表格内容居中css样式,css表格中的内容如何居中？css表格中的文本样式介绍
你知道css表格的内容太是如何居中的吗?你知道css表格的文本如何设计左对齐吗?你知道css表格如何设置右对齐吗?这些内容都在这篇文章之中等着你来学习了. 首先我们先介绍css表格中的内容是如何居中的 ...
elementui table表格跨分页多选
elementui table表格跨分页多选项目中遇到的表格多选加分页,要获取选中的数据,使用elementui的表格开发,刚开始思路是: 1.创建一个数组,使它每项为一页所选择的选择项数据数组.选 ...
table表格中单元格的合并
目录 table表格中单元格的合并 table表格中单元格的合并很多朋友不一定了解,今天我就写一篇博客来跟大家分享一下table表格中的跨行合并和跨列合并. 我们先看一个合并过的表格,大家可以先思考一 ...
Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
iView中table表格中使用select选框和下拉菜单的方法
首先是iview的表格中使用select选框 {title: '适用区域',//纵列表头(类似于th)width:140, //列表每一格的宽度align: 'center', //ivew里面的写法 ...
pythonexcel汇总_用python汇总excel表格数据-怎样用python遍历表格中的内容
如何用python将数据写入excel表格 # 需 xlrd-0.9.2 xlutils-1.7.1 这两个模块 from xlwt import Workbook, Formula import ...
mysql 取数据展示_php mysql_fetch_row逐行获取结果集数据并显示在table表格中
在一般的网站中,我们会通常看到,很多数据库中表的数据在浏览器都是出现在表格中的,一开始让自己感到很神奇,但是仔细想想也不算太复杂,既然可以dql和dml的一般返回,以表格的方式返回应该也不成问题,但是 ...

elementUi——table表格中字段内容超过2行后，省略号...展示，不超过两行不处理。超过两行再显示全部。

1.`鼠标移入后的效果可以通过以下代码实现`

2.`css`样式

不足两行的不显示全部内容，只有超出两行的再显示全部内容

1.1 插槽展示某一列的内容，注意要给此列添加width固定宽度

1.2 获取到表格数据后，需要对表格中的字段进行判断处理

elementUi——table表格中字段内容超过2行后，省略号...展示，不超过两行不处理。超过两行再显示全部。相关推荐

最新文章

热门文章

elementUi——table表格中字段内容超过2行后，省略号...展示，不超过两行不处理。超过两行再显示全部。

1.鼠标移入后的效果可以通过以下代码实现

2.css样式

不足两行的不显示全部内容，只有超出两行的再显示全部内容

1.1 插槽展示某一列的内容，注意要给此列添加width固定宽度

1.2 获取到表格数据后，需要对表格中的字段进行判断处理

elementUi——table表格中字段内容超过2行后，省略号...展示，不超过两行不处理。超过两行再显示全部。相关推荐

最新文章

热门文章

1.`鼠标移入后的效果可以通过以下代码实现`

2.`css`样式