el-tooltip文字溢出

el-tooltip文字溢出时，可以使用改写后的el-tooltip组件来实现只在文字溢出时显示tooltip的效果。通过在el-tooltip组件上添加一个名为"overflow"的props属性，并将其设置为true，即可实现该功能。改写el-tooltip的方法如下：

在项目的utils文件夹中新建一个"rewriteElTooltip"文件，内容如下：

export default function rewriteElTooltip(el) {
  el.props = {
    ...el.props,
    overflow: Boolean // 为el-tooltip追加名为'overflow'的props属性
  }
  el.methods = {
    ...el.methods,
    // 重写el-tooltip的show方法
    show() {
      // 如果设置了overflow，则判断文字是否溢出，若未溢出则不显示tooltip
      if (this.overflow) {
        if (this.$el.scrollWidth <= this.$el.clientWidth) return
      }
      // el-tooltip自带的，保留
      this.setExpectedState(true);
      this.handleShowPopper();
    }
  }
}

在项目的main.js里引入并改写el-tooltip：

// ...其他配置
import ElementUI, {Tooltip} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import rewriteElTooltip from "@/utils/rewriteElTooltip"; // 引入重写el-tooltip的方法

rewriteElTooltip(Tooltip) // 重写el-tooltip的方法 注意一定要放在 Vue.use(ElementUI); 之前

Vue.use(ElementUI);
// ...其他配置

这样，当el-tooltip组件的文字溢出时，tooltip会自动显示；而当文字未溢出时，tooltip则不会显示。
#### 引用[.reference_title]
- *1* *2* *3* [改造el-tooltip，使其支持“文字溢出时显示，不溢出则不显示”](https://blog.csdn.net/Thomas310/article/details/128369605)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]