Vue3当中el-tree树形控件使用

tree悬停tooltip效果

javascript 复制代码
文本过长超出展示省略号 
如果文本超出悬停显示tooltip效果 反之不显示
这里直接控制固定宽度限制 试了监听宽度没效果
javascript 复制代码
<template>
  <el-tree
    show-checkbox
    :check-strictly="true"
    :data="data"
    node-key="id"
    :props="defaultProps"
  >
    <template #default="{ node }">
      <span>
        <el-tooltip :content="node.label" :disabled="!isTextOverflow(node.label)" placement="top">
          <span class="tree-node-label">{{ node.label }}</span>
        </el-tooltip>
      </span>
    </template>
  </el-tree>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const data = ref([
      { id: 1, name: 'Parent Node with very long text content that may overflow' },
      { 
        id: 2, 
        name: 'Parent',
        children: [
          { id: 21, name: 'Child Node with normal length' }
        ]
      }
    ]);

    const maxCharLength = ref(10);//定义最大字符 根据需求可调整

    const defaultProps = {
      label: 'name',
      children: 'children'
    };

    // 检测文本是否溢出
    const isTextOverflow = (label) => {
      return label.length > maxCharLength.value;
    };

    return {
      data,
      defaultProps,
      isTextOverflow
    };
  }
};
</script>

<style scoped>
.tree-node-label {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
</style>
相关推荐
@AfeiyuO4 小时前
vue3 实现将页面生成 pdf 导出(html2Canvas + jspdf)
前端·pdf·vue
叫我阿柒啊8 小时前
Java全栈开发面试实战:从基础到微服务的完整技术栈解析
java·spring boot·微服务·前端框架·vue·jwt·全栈开发
凉白开<--16 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
Zz_waiting.19 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
GISer_Jing20 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
F2E_Zhangmo20 小时前
基于cornerstone3D的dicom影像浏览器 第一章 webpack5+vue2+cornerstonejs项目创建
vue·cornerstone·cornerstone3d·cornerstonejs
摇滚侠1 天前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记02
vue
zhong liu bin1 天前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
知识分享小能手1 天前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue