elementUi——table表格中内容超过2行后,省略号...展示,鼠标悬停展示全部

elementUI、elementPlus的el-table都支持文字一行展示不全隐藏,悬停展示tooltip。但是UI设计会提出展示2行隐藏的的要求,我们便有这样的需求。项目中el-table往往会进行二次封装,所以下面的代码是在此基础上解决这个问题的。

1、首先是组件内代码

javascript 复制代码
<template v-if="item.tooltip">
  <el-tooltip
    :content="item.tooltip.contentFun ? item.tooltip.contentFun(scope.row[item.prop]) : scope.row[item.prop]"
    placement="top"
    :hide-after="0"
    :show-after="100"
    :raw-content="item.tooltip.rawContent || false"
    effect="dark">
      <div class="tooltip-content"
        :style="{
          webkitLineClamp: item.tooltip.lines || 1,
          lineClamp: item.tooltip.lines || 1
        }"
      >{{ scope.row[item.prop] || '--' }}</div>
  </el-tooltip>
</template>
javascript 复制代码
/**
  * {
  *   tooltip: { 气泡文字提示
  *     lines  展示几行后隐藏   数字类型
  *     rawContent   内容是否作为 HTML 字符串处理   Boolean类型
  *     contentFun   内容处理函数   Funciton(data){}
  *   }
  * }
*/
columns: {
  type: Array,
  default: () => []
},

我们通常会props接受columns来生成表格,这里如果列带有tooltip属性,则悬停展示全部文字。tooltip可以是一个Object或者Boolean。

Object支持参数:

  • lines 现在是支持2行,那么就可能支持3行、4行,所以这里直接设为参数
  • rawContent 内容是否作为HTML字符串处理,Boolean类型。如果内容折行带有<br>标签,是需要当HTML字符串处理的。
  • contentFun 我们的UI设计希望内容截取这行,所以这里接受内容的处理方法

3、父组件代码

javascript 复制代码
[
  {
    label: 'xxxx',
    prop: 'xxxx',
    fixed: true,
    props: {
      minWidth: '170'
    },
    tooltip: {
      lines: 2,
      rawContent: true,
      contentFun: function (data) {
        const arr = data.split('(')
        return `${arr[0]}<br>(${arr[1]}`
      }
    }
  },
]

我这里是需要截取折行,具体使用的时候根据需要去处理内容即可。

后面还想要扩展下如果没有隐藏就无需悬停展示全部,写了以后会更新上来。

相关推荐
盛夏绽放6 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao22 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo22 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er28 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年31 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er35 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing36 分钟前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客40 分钟前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端1 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构