解决element-ui表格添加show-overflow-tooltip后鼠标移入无法复制内容的问题

维他命三千

已于 2024-06-18 16:20:47 修改

阅读量1.5k

点赞数 11

文章标签： ui vue.js elementui

于 2024-02-11 14:44:05 首次发布

本文链接：https://blog.csdn.net/jayshon_jaa/article/details/136095824

版权

本文介绍了如何在Vue项目中安装并使用vue-element-table-tooltip第三方库，包括全局引入、组件局部使用以及在el-table-column中的应用，同时还提供了仓库链接。

摘要由CSDN通过智能技术生成

在element ui的表格组件中，当表格内容超过列宽后，可以使用show-overflow-tooltip属性设置悬浮内容，但是当鼠标移入到悬浮窗时，悬浮窗却直接消失，从而导致超过列宽的内容无法复制。element官方表示没有修复此问题的计划（el-table component adds show-overflow-tooltip, and text in tooltip cannot be copied by mouse selection），但是实际上产品又确确实实有这个需求，因此我们可以使用第三方库来解决这个问题。

安装第三方库

npm install --save vue-element-table-tooltip

在main.js中引入

import elementTableTooltip from "vue-element-table-tooltip";

Vue.use(elementTableTooltip, {
  theme: "dark", // dark | light
});

如果只在组件中部分使用

import { darkTooltip, lightTooltip } from 'vue-element-table-tooltip'

export default {
	...
	directives: {
    	"element-table-tooltip": darkTooltip,
    },
    ...
}

在table组件中使用

<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip
></el-table-column>

如果需要临时禁用tooltip，将绑定值设为false即可。false可以替换为判定表达式。

<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip="false"
></el-table-column>

另外，tooltip可以单独设置主题，如下所示：

<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip:dark
></el-table-column>
<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip:light
></el-table-column>