vue element表格某一列内容过多,超出省略号显示的实现

目录
  • element表格某一列内容过多,超出省略号显示
    • 这样就好了,效果如下
  • element-UI table文字超出两行,隐藏多余文字,移入显示tips
    • element-UI表格的列属性
    • 超出两行隐藏多余文本,移入时tips显示全部内容
    • 超出的文本的隐藏
    • 文本超过两行,移入时tips显示全部内容
    • 通过长度判断

element表格某一列内容过多,超出省略号显示

在使用element组件库里面的table组件时,遇到某一个字段内容过多,导致td高度被撑开,布局显得很不美观,像这样

这时我们只要给table-cloumn添加一个属性show-overflow-tooltip,

<el-table-column label="描述" :show-overflow-tooltip='true'>
              <template slot-scope="scope">
                <span>{{scope.row.ms}}</span>
              </template>
            </el-table-column>

实现超出隐藏,并有提示,这样的话会有下面效果:

提示的长度特别长,超出了屏幕,不太好看。

可以在处理下样式,如下:

<style>
 .el-tooltip__popper{
    max-width:20%;
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }
</style>

这样就好了,效果如下

如果想要设置,显示几行,超过指定的值再隐藏,可以参考下面

element-UI table文字超出两行,隐藏多余文字,移入显示tips

element-UI表格的列属性

通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代,并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求,显然设置这个属性是无法完成的。

超出两行隐藏多余文本,移入时tips显示全部内容

我们想完成的是超出两行才用省略号隐藏多余文本,并且移入才会有tips显示;两行以内的文本则不隐藏也不显示tips。

超出的文本的隐藏

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

文本超过两行,移入时tips显示全部内容

<!-- tips悬浮提示 -->
<el-tooltip
        placement="top"
        v-model="scope.row.showTooltip"
        :open-delay="500"
        effect="dark"
        :disabled="!scope.row.showTooltip">
  <div slot="content">{{scope.row.note}}</div>
  <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
</el-tooltip>

注意! 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。

showTips(obj, row){
      /*obj为鼠标移入时的事件对象*/
      /*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement('span');
      TemporaryTag.innerText = row.note;
      TemporaryTag.className = 'getTextWidth';
      document.querySelector('body').appendChild(TemporaryTag);
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
      document.querySelector('.getTextWidth').remove();
      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth
      /*当文本宽度小于||等于容器宽度两倍时,代表文本显示未超过两行*/
      currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
}

通过长度判断

一开始我是想通过表格高度去判断,但是后来发现,高度不是一个固定不变的值,会随着移入移出变化,并且其他列的高度超出也会影响到一整行的高度。所以最后还是通过文本宽度来判断,把文本宽度与容器宽度比较,这样得到的值才是固定不变的。

有朋友说会出现多个tips,我是直接放在el-table-column的template里面的,目前没发现这种情况。

<el-table-column
                prop="note"
                label="简介">
          <template slot-scope="scope">
            <!-- tips悬浮提示 -->
            <el-tooltip
                    placement="top"
                    v-model="scope.row.showTooltip"
                    :open-delay="500"
                    effect="dark"
                    :disabled="!scope.row.showTooltip">
              <div slot="content">{{scope.row.note}}</div>
              <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
            </el-tooltip>
          </template>
        </el-table-column>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Element-UI中关于table表格的那些骚操作(小结)

    最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s

  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

  • Vue 中文本内容超出规定行数后展开收起的处理的实现方法

    文字比较难解释,直接看图应该就懂是要做什么了. 需求 工作中遇到的,需求就是超过四行得有个展开按钮,点击展开显示所有内容,不超过四行的话就不需要这个按钮并显示所有内容. 思路首先得判断文本自否超过四行,因为这些一般都是是前端异步请求然后后端发送过来,在组长的指导下,使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化.接下来主要是 css 上的思路,其实上图可以分为两部分,如下图,标号1的部分展示前面三行,标号为2的部分会根据1的行数判断缩进的大小,然后展示第四行.最后通过背景色

  • vue element表格某一列内容过多,超出省略号显示的实现

    目录 element表格某一列内容过多,超出省略号显示 这样就好了,效果如下 element-UI table文字超出两行,隐藏多余文字,移入显示tips element-UI表格的列属性 超出两行隐藏多余文本,移入时tips显示全部内容 超出的文本的隐藏 文本超过两行,移入时tips显示全部内容 通过长度判断 element表格某一列内容过多,超出省略号显示 在使用element组件库里面的table组件时,遇到某一个字段内容过多,导致td高度被撑开,布局显得很不美观,像这样 这时我们只要给t

  • vue+element表格导出为Excel文件

    本文实例为大家分享了vue+element表格导出为Excel文件的具体代码,供大家参考,具体内容如下 安装这三个依赖 npm install xlsx file-saver -S npm install script-loader -S -D 组件代码 <template> <div> <el-button type="primary" @click="exportExcel">导出文件</el-button> &l

  • vue+element表格实现多层数据的嵌套方式

    目录 vue+element表格实现多层数据嵌套 这是完成之后的 方法   vue+element表格实现多层数据嵌套 今天用element的表格渲染了商城的购物车列表,element的表格之前也用到过,它把所有的东西都封装好了, 这是完成之后的    只需要往里面传数据就可以了,通过prop来拿到相对应的字段,非常方便,但是天不尽人愿呐,后台接口返回的数据   是嵌套多了一层,直接上图,后台返回的数据结构    data下面是店铺的名字和id,orderItemList是店铺下面的商品,店铺要

  • vue table表格中如何控制下拉框的显示隐藏

    目录 vue table表格控制下拉框的显示隐藏 vue下拉框清空 总结 vue table表格控制下拉框的显示隐藏 需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏 平时 点击 失去焦点后变化平时的显示 <vxe-table-column align="center" title="类型" width="270" style="height:40px;" field="collectio

  • JQuery 控制内容长度超出规定长度显示省略号

    长度超出规定长度,显示省略号 设置class为displayPart, 设置自定义属,displayLength可显示长度(不包含...),双字节字符,长度 *2, 复制代码 代码如下: <script type="text/javascript"> $.fn.extend({ displayPart:function () { var displayLength = 100; displayLength = this.attr("displayLength&qu

  • vue+element-ui表格封装tag标签使用插槽

    我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性.在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性.首先了解什么是插槽. 插槽 省去官方的复杂讲解和代码,插槽的意思简单来说,就是在子组件的某个地方留一个占位符,当父组件使用这个子组件的时候,可以自定义这个占位符所占地方呈现的样子,可能是一个标题,一个按钮,甚至一个表格,一个表单. 为什么要插槽呢?我们抽离组件的原因就是因为可重复的代码太多了,当使用可复用的组件时,大大减少了复制粘贴.设想有

  • Vue element-ui表格内嵌进度条功能实现方法

    目录 一.引言 二.方法 三.实验结果与讨论 1.前期准备工作 2.实现功能 3完整实验代码 四.结语 一.引言 在着手做项目时,尤其是后台管理系统类的项目,不难会遇到,数据用进度条的形式呈现,可视化. 二.方法 本次实验主要应用element组件中的progress. 需要使用到属性: Type 进度条类型line/circle/dashboard :text-inside 进度条显示文字内置在进度条内(只在 type=line 时可用) :percentage 百分比(必填) :color

  • element表格行列拖拽的实现示例

    element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,先来看一下动态图,效果是不是你们想要的. 首先需要安装Sortable.js npm install sortablejs --save 然后引用 import Sortable from 'sortablejs' 需要注意的是element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况. ###示例代码 <template> <div st

  • vue+element tree懒加载更新数据的示例代码

    使用element tree实现懒加载,更新某一节点的数据 1.tree 懒加载 只需要在el-tree标签上面添加lazy,load属性,load的接收是一个函数.这里贴上官网给出的方法 <el-tree :data="treeList" ref="tree" class="vue-tree" lazy :load="loadNode" :highlight-current="true" :node

  • Vue + element 实现多选框组并保存已选id集合的示例代码

    Vue + element 实现列表复选框并保存已选id集合 1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源 2.初始化tableData集合 3.循环遍历需要显示得值 4.在多选框组上添加chang事件 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', addre

随机推荐