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

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

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

相关推荐
浊浪载清辉24 分钟前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html
Want59526 分钟前
HTML元素周期表
前端·html
一只一只妖3 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟6 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶6 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip7 小时前
js上下文
前端·javascript
中草药z7 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)8 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休8 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架