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>
相关推荐
蜚鸣1 天前
Vue的快速入门
vue
吃饭最爱3 天前
⽹络请求Axios的概念和作用
vue
魂尾ac3 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐3 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞3 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52144 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦5 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君5 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手5 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO5 天前
分类别柱状图(Vue3)
typescript·vue·echarts