具体代码

 <el-tree
    :data="deptOptions"
    :props="defaultProps"
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    :default-expanded-keys="defaultExpandedKeys"
    ref="tree"
    :default-expand-all="isExpandAll"
    :highlight-current="true"
    @node-click="handleNodeClick"
    node-key="id"
  >
    <el-tooltip
      :disabled="showTitle"
      effect="dark"
      :content="tooltipTitle"
      placement="top"
      slot-scope="{ node, data }"
    >
      <span
        class="span-ellipsis"
        @mouseover="onShowNameTipsMouseenter"
        >{{ node.label }}</span
      >
    </el-tooltip>
  </el-tree>
data(){
	return{
	  tooltipTitle: "",
      showTitle: true,
	}
},
methods:{
onShowNameTipsMouseenter(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        this.tooltipTitle = e.target.innerText;
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    }
}
<style>
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}
</style>

详解:

 <el-tree
    :data="deptOptions"
    :props="defaultProps"
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    :default-expanded-keys="defaultExpandedKeys"
    ref="tree"
    :default-expand-all="isExpandAll"
    :highlight-current="true"
    @node-click="handleNodeClick"
    node-key="id"
  >
    <el-tooltip
      :disabled="showTitle"    //判断是否显示tooltip
      effect="dark"
      :content="tooltipTitle"   //移入提示内容
      placement="top"
      slot-scope="{ node, data }"
    >
      <span
        class="span-ellipsis"     //设置超出样式、添加省略号
        @mouseover="onShowNameTipsMouseenter"    //移入方法 判断当前文本是否超出
        >{{ node.label }}</span
      >
    </el-tooltip>
  </el-tree>
data(){
	return{
	  tooltipTitle: "",
      showTitle: true,
	}
},
methods:{
onShowNameTipsMouseenter(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        this.tooltipTitle = e.target.innerText;
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    }
}
<style>
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐