element ui 中在el-table内,当内容超过多少行时,显示el-tooltip

这篇具有很好参考价值的文章主要介绍了element ui 中在el-table内,当内容超过多少行时,显示el-tooltip。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求背景

最近来了一个需求,在一个el-table里边的某一列渲染一个 ‘介绍’ 的内容,由于内容过多,全部展示显示的不是很美观,所以就给定了个需求让超出两行后显示省略号,并在鼠标移上去之后显示全部内容。
我首先想到的就是使用el-tooltip来实现,但是在使用过程中试了很多方法,其中有些并不友好,最后选了一个本人认为相对合适的。
本文用来记录和学习,仅代表自己的观点,希望能帮助到别人,也希望大佬可以指正不足之处使我进步。
废话不多说,直接上代码。

实现过程

html:

<el-table-column label="介绍" prop="intro">
    <template slot-scope="scope">
        <p v-if="!scope.row.intro">-</p>
        <el-tooltip v-if="scope.row.intro" :disabled="showTip" effect="dark" :content="scope.row.intro" placement="top">
            <div class="designer-inner">
                 <div 
                    @mouseenter="showTips($event,scope.row)"
                    @mouseleave="hiddenShowTips($event,scope.row)" 
                    class="box-cont">
                    {{ scope.row.intro }}
                 </div>
             </div>
         </el-tooltip>
     </template>
</el-table-column>

在data里边定义好变量:

data: function () {
        return {
          showTip: true,//控制el-tooltip的禁用
        }
}

js:
接下来是js的部分,我的思路是获取文字内容容器的高度,当文字超过两行的高度时就进行相应的禁用或者启用el-tooltip(这里的高度可以根据自身的需求进行改变)。

showTips: function(el, row) {
    if (el.target.scrollHeight > 46) {  //这里我的两行高度为46,可以根据自身需求进行更改
        this.showTip = false;
    } else {
        this.showTip = true;
    }
},
hiddenShowTips: function(el, row) {
    this.showTip = true;
},

通过鼠标的划入和划出事件,获取文字容器,使用el-tooltip的disabled属性来巧妙的进行显示隐藏。
css:
最后通过css来实现省略号的显示。文章来源地址https://www.toymoban.com/news/detail-774848.html

.box-cont {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //超过两行时显示省略号
}

到了这里,关于element ui 中在el-table内,当内容超过多少行时,显示el-tooltip的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui - el-table数据排序

    后台一次性返回全部数据,需要前端对所有数据进行分页和排序。 使用element-ui的 自定义排序 规则,将 sortable 设置为 custom ,同时在 Table 上监听 sort-change 事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而对所有数据进行排序再对表格数据进行分页计算。 如上

    2024年02月11日
    浏览(50)
  • element ui - el-table 表头筛选

    场景 :根据表头筛选出表格中符合条件的数据; 效果 : 筛选结果 : 在列中设置 filters 和 filter-method 属性即可开启该列的筛选。 filters :筛选的下拉列表,是一个json数组,里面的json对象是 { text: ‘’, value: ‘’ } 的格式,text是下拉选项的显示内容,value则为选择的值;

    2024年02月05日
    浏览(51)
  • Element ui el-table 合并单元格

      el-table v-loading=\\\"loading\\\" :data=\\\"tableData\\\" style=\\\"width: 100%\\\" highlight-current-row :span-method=\\\"arraySpanMethod\\\"         el-table-column type=\\\"index\\\" label=\\\"序号\\\" /         el-table-column v-for=\\\"item in formThead\\\" :key=\\\"item.label\\\" :label=\\\"item.label\\\" :prop=\\\"item.prop\\\" :formatter=\\\"item.formatter\\\" :width=\\\"item.width || \\\'auto\\\'\\\" /        

    2024年02月02日
    浏览(36)
  • Element UI <el-table>去除外边框

     使用 Element UI el-table 時,总会自带外边框,写了好多css样式始终不能去除,最终发现是th与td所带的样式。 代码如下

    2024年02月09日
    浏览(42)
  • Element UI 表格 el-table 二次封装

    Tips: 文章末尾有完整封装代码 一、继承 element 表格属性 需要将element提供的表格属性使用props传入组件中 二、配置 element 表格的表头 使用 props 传入的表头数据遍历得到表格的表头。 有些列的数据需要自定义内容,例如:操作列、不同样式的数据展示等。 方式一 需要自定义

    2023年04月08日
    浏览(46)
  • element ui el-table进行二次封装

    在做项目的时候特别是后台管理的时候table难免用的多,所有根据vue框架对table进行二次封装 好处那就是可以省很多代码,而且用起来也方便。非常的奈斯 封装的内容 组件内的按钮以及复选框分页都是通过变量来控制。 组件内部也是写了方法通过子传父使父组件更好的去使

    2024年02月12日
    浏览(46)
  • element ui el-table分页多选功能

    selection-change:当选择项发生变化时会触发该事件(当分页切换时,选中的数据都会自动清空)

    2024年02月09日
    浏览(37)
  • element ui - el-table给单元格添加点击事件

    el-table中,点击版本号触发查看配置功能,但是产品想将热区扩大,从点击版本号扩大到点击整个单元格都可以查看。 在 el-table-column 中的 template 标签里,添加一个 div元素 包裹版本号和el-tag,将点击事件绑定在div元素上 :

    2024年02月12日
    浏览(42)
  • [element-ui] el-table点击高亮当前行

    1、highlight-current-row 2、:row-class-name=“tableRowClassName”,需要借助@row-click=\\\"handleRowClick\\\"获取当前点击行的下标 参考: elementUI中table点击高亮当前行的两种方式

    2024年03月21日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包