element的el-tree中加img

最新推荐文章于 2024-03-20 15:58:39 发布

意林_10

最新推荐文章于 2024-03-20 15:58:39 发布

阅读量556

点赞数

分类专栏： vue学习文章标签： elementui

本文链接：https://blog.csdn.net/weixin_41951632/article/details/113389321

版权

vue学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js应用中创建一个动态树形组件。通过`el-tree`组件，实现了数据加载、节点点击事件处理以及自定义节点模板，包括图片显示和错误处理。同时，`filter-node-method`属性用于实现节点筛选功能，提供了一种灵活的数据展示方式。

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

		<el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          >
          <span class="custom-tree-node" slot-scope="{ data }">
            {{data.label}}
            <el-image :src="data.img" v-if="data.img">
              <div slot="error" class="tree_image_slot">
                  <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </span>
          </el-tree>