vue3表格使用tooltip二次封装，目的使表格内容与悬浮内容不一致

小茹想睡觉

已于 2022-07-28 20:32:08 修改

阅读量914

点赞数 1

分类专栏： vue 文章标签：前端 html vue.js elementui

于 2022-07-28 20:30:27 首次发布

本文链接：https://blog.csdn.net/Rice_w/article/details/126042268

版权

vue 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

在使用element-plus中的表格组件，当内容过长时，悬浮显示，下面👇这个属性是表格的内置属性，表示当表格当前列的内容过长时，省略并悬浮展示，并且内置属性悬浮显示的内容，与表格内置的内容保持一致。
在这里插入图片描述
但是，在我们的实际开发中，可能会有要求，表格内只显示某一段重点内容，但是悬浮的时候显示所有内容，这个时候我们就需要对表格进行二次封装tooltip。两者效果的区别如下
样式1、原来的效果
第一种内置实现
样式2、想要的效果
在这里插入图片描述
具体实现：

一、内置属性（样式1）

<template>
  <el-table :data="tableData" stripe style="width: 500px">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" min-width="100" show-overflow-tooltip />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

二、二次封装tooltip实现表格内容与悬浮内容不一致（样式2）

<template>
  <el-table :data="tableData" stripe style="width: 500px">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" min-width="100">
        <template #default="scope">
          <el-tooltip placement="top" :content="scope.row['address']">
      	{{addressFormat(scope.row["address"])}}
          </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
const addressFormat = (val:string) =>{
  return val.substring(val.lastIndexOf(',') + 1);
}
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>