自定义给 element el-tree节点加icon图标

给 element树组件 el-tree自定义icon图标:

  • 可以通过插槽的方式:

    <el-tree
        :data="treeData"
        default-expand-all
        node-key="id"
        ref="tree"
        @node-click="nodeClick"
        :props="defaultProps"
        highlight-current
        :expand-on-click-node="false"
        style="height:100%; margin-top:30px; background-color:#FFF;"
    >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="data.children" class="iconfont"> &#xe7d1; </span>  // 父级icon
            <span v-else class="iconfont" style="margin-right: 3px">&#xe7bb;</span>  // 子集icon
            <span>{{ node.label}}</span>
        </span>
    </el-tree>
    
  • 效果:
    在这里插入图片描述

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在使用 Element UI 的 Tree 组件时,可以通过 `default-expand-all` 或者 `default-expanded-keys` 属性来设置默认展开的节点,但是如果需要动态控制节点的展开和关闭,需要进行以下操作: 1. 在树形结构数据中添一个 `children` 属性,表示当前节点子节点 2. 在 `el-tree` 的 `node-click` 事件中调用 `loadNode` 方法,载当前节点子节点数据 3. 在 `el-tree` 的 `expand-change` 事件中更新当前节点的 `children` 属性为新的子节点数据 4. 在 `el-tree` 的 `render-content` 事件中判断当前节点是否含有子节点,如果有则渲染展开/关闭图标 以下是一个简单的示例代码: ```html <template> <el-tree :data="treeData" :render-content="renderContent" :load="loadNode" @node-click="handleNodeClick" @expand-change="handleExpandChange"></el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: '节点1', isLeaf: false, children: [] } ] } }, methods: { loadNode(node, resolve) { // 子节点数据 setTimeout(() => { resolve([ { id: 2, label: '子节点1', isLeaf: true }, { id: 3, label: '子节点2', isLeaf: true }, { id: 4, label: '子节点3', isLeaf: true } ]) }, 1000) }, handleNodeClick(node) { // 点击节点时展开/关闭节点 this.$refs.tree.toggleNode(node) }, handleExpandChange(node, expanded) { // 更新节点子节点数据 if (expanded) { this.loadNode(node, (children) => { this.$set(node, 'children', children) }) } else { this.$set(node, 'children', []) } }, renderContent(h, { node, data }) { // 自定义节点内容,包括展开/关闭图标 const hasChildren = data.children && data.children.length const expandIcon = node.expanded ? 'el-icon-minus' : 'el-icon-plus' return ( <span> <i class={'el-icon-caret-right' + (hasChildren ? ' has-children ' + expandIcon : '')}></i> {data.label} </span> ) } } } </script> ``` 在这个示例中,我们定义了一个树形结构的数据 `treeData`,其中每个节点包含一个 `children` 属性,表示当前节点子节点。在 `el-tree` 的 `node-click` 事件中调用 `toggleNode` 方法切换节点的展开状态,然后在 `el-tree` 的 `expand-change` 事件中根据节点的展开状态载或清空子节点数据。在 `el-tree` 的 `render-content` 事件中判断当前节点是否含有子节点,如果有则渲染展开/关闭图标
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值