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

WhaleHumpback2024-04-25 10:54

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

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

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