【el-tree 文字过长处理方案】

文字过长处理方案

一、示例代码

dart 复制代码
<div
            style="height: 600px;overflow: auto"
            class="text item"
          >
            <el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              class="filter-tree"
              node-key="id"
              default-expand-all
              @node-click="getTableData"
            >
              <template
                slot-scope="{node}"
                class="custom-tree-node"
              >
                <!--                <span>{{ node.label }}</span>-->
                <!--                <span v-show="!data.children">
                  <el-button type="text" size="mini" @click="() => crud.toAdd(data)">
                    新增
                  </el-button>
                </span>-->
                <span
                  v-if="node.label.length <= 10"
                  class="tree-text"
                > {{ node.label }}</span>
                <el-tooltip
                  v-else
                  effect="dark"
                  :content="node.label"
                  placement="top"
                >
                  <span class="tree-text"> {{ node.label }}</span>
                </el-tooltip>
              </template>
            </el-tree>
          </div>

二、关键代码

  1. 树形代码
dart 复制代码
    <span
        v-if="node.label.length <= 10"
                  class="tree-text"
                > {{ node.label }}</span>
                <el-tooltip
                  v-else
                  effect="dark"
                  :content="node.label"
                  placement="top"
                >
                  <span class="tree-text"> {{ node.label }}</span>
                </el-tooltip>
  1. 样式代码
dart 复制代码
.tree-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  min-width: 300px;
}

三、效果图

相关推荐
明月醉窗台3 分钟前
qt使用笔记六之 Qt Creator、Qt Widgets、Qt Quick 详细解析
开发语言·笔记·qt
wangjialelele6 分钟前
平衡二叉搜索树:AVL树和红黑树
java·c语言·开发语言·数据结构·c++·算法·深度优先
lili-felicity14 分钟前
CANN性能调优与实战问题排查:从基础优化到排障工具落地
开发语言·人工智能
独自破碎E16 分钟前
【BISHI15】小红的夹吃棋
android·java·开发语言
进阶小白猿28 分钟前
Java技术八股学习Day33
java·开发语言·学习
小迷糊的学习记录1 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
空&白1 小时前
vue暗黑模式
javascript·vue.js
执风挽^1 小时前
Python基础编程题2
开发语言·python·算法·visual studio code
Z9fish2 小时前
sse哈工大C语言编程练习20
c语言·开发语言·算法
VT.馒头2 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript