tree自定义图标操作和长度显示

最新推荐文章于 2025-06-10 19:00:01 发布

原创

最新推荐文章于 2025-06-10 19:00:01 发布 · 497 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

这是一个关于使用Element UI和Ant Design Vue构建的树形目录操作组件，包括节点点击、编辑、添加和删除功能。同时，展示了如何集成Video.js进行视频播放，并提供了新建目录的弹窗操作。

在这里插入图片描述

<template>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
        class="filter-tree"
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{
  
  { node.label }}</span>
          <span>
            <div v-if="data.id == checkId">
              <el-button type="text" size="mini" @click="() => edit(data)">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button type="text" size="mini" @click="() => append(data)">
                <i class="el-icon-circle-plus-outline"></i>
              </el-button>