【VUE】el-tree点击树文字过长用 … 代替

最新推荐文章于 2024-05-09 11:27:47 发布

可可肉粒多ོ༙༽

最新推荐文章于 2024-05-09 11:27:47 发布

阅读量138

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/take_it_easy_hes/article/details/130759410

版权

本文介绍了如何在内容社区中使用ElementUI的el-tree组件来实现分类管理，包括添加、编辑和删除节点的功能，以及相关的属性配置和方法实现。

摘要由CSDN通过智能技术生成

<el-tree
  class="filter-tree"
  :data="tCodeSetCategoryTreeData"
  :props="{
          value: 'id',             // ID字段名
          label: 'name',         // 显示名称
          children: 'children'    // 子级字段名
        }"
  default-expand-all
  highlight-current
  node-key="id"
  :filter-node-method="filterNode"
  :expand-on-click-node="false"
  @node-click="handleNodeClick"
  ref="tCodeSetCategoryTree">
       <span class="custom-tree-node" slot-scope="{ node, data}">
          <el-tooltip effect="dark" :content="node.label" placement="top-start" style="font-size:14px;">
            <span class="em-tree-text">{{ node.label }}</span>
          </el-tooltip>
          <span>
              <el-button type="text" class="tree-item-button" icon="el-icon-plus"
                         @click="() => addChildTreeNode(data)"></el-button>
              <el-button type="text" class="tree-item-button" icon="el-icon-edit-outline"
                         @click="() => editTreeNode(data)"></el-button>
              <el-button type="text" class="red tree-item-button" icon="el-icon-delete"
                         @click="() => delTreeNode(data)"></el-button>
          </span>
      </span>
</el-tree>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
span.em-tree-text{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width:100%;
  text-overflow: ellipsis;
}
</style>