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]}`
      }
    }
  },
]

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

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

相关推荐
NetX行者2 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder2 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder3 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806917 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
rui锐rui37 分钟前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说38 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang