javascript - 如何在element ui中的Tree 树形控件里添加图片？

Question

如图所示，我需要在每一项的勾选框和文字的中间添加img图片，可自定义大小和左右间距，图片路径会同样返回在data数据中，请问该怎么做到呢？
参考文档地址：https://element.eleme.io/#/zh-CN/component/tree#fang-fa

在这里先谢谢各位解答的大哥大姐们，小弟感激不尽！！

Answer 1

第一种

参数	说明	类型
render-content	树节点的内容区的渲染 Function	Function(h, { node, data, store }

<template>   <el-tree      :data="data"      :render-content="renderContent">    </el-tree></template><script>    export default {        methods:{            renderContent(h, { node, data, store }) {              return (                <span class="custom-tree-node">                    <img src="test.jpg" />                  <span>{node.label}</span>                </span>);            }        }    }</script>

第二种

<el-tree :data="data">    <span class="custom-tree-node" slot-scope="{ node, data }">        <img src="test.jpg" />        <span>{{ node.label }}</span>      </span></el-tree>

Answer 2

在 Element UI 的 Tree 树形控件中添加图片，你可以通过自定义节点内容来实现。你需要使用 render-content 插槽来自定义节点的内容。

以下是一个示例代码，展示如何在 Tree 控件中添加图片：

<el-tree  :data="data"  :props="defaultProps"  node-key="id"  :default-expand-all="true">  <template #default="{ node, data }">    <div>      <img :src="data.image" class="custom-image" /> <!-- 使用 data 中的 image 属性作为图片路径 -->      <span class="custom-text">        {{ node.label }} <!-- 显示节点的标签 -->      </span>    </div>  </template></el-tree>

在上面的示例中，我假设你的数据对象中有一个 image 属性用于存储图片的路径。你可以根据实际情况修改 :src 的绑定值。另外，你可以通过 CSS 来定义图片的大小和左右间距。例如：

.custom-image {  width: 20px; /* 设置图片宽度 */  height: 20px; /* 设置图片高度 */  margin-right: 10px; /* 设置左右间距 */}

请注意，render-content 插槽是 Element UI 2.x 中的功能，如果你使用的是旧版本，可能不支持该功能。确保你正在使用最新版本的 Element UI，并查阅相应版本的文档以获取更多细节和说明。