vue中的el-tree @node-click传自定义参数

 更新时间:2022年08月15日 15:45:34   作者:成长中...  
这篇文章主要介绍了vue中的el-tree @node-click传自定义参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

el-tree @node-click传自定义参数

<el-tree node-click="(data, node, item) => nodeClick(data, node, item, param)"></el-tree>
nodeClick(data, node, item, param) {
    console.log(data)   // data,node,item为默认参数
    console.log(node)
    console.log(item)
    console.log(param)    // param为自定义的参数
}

给el-tree添加自定义图标

 <el-tree
          v-if="treeVisible"
          ref="tree"
          :props="Props"
          node-key="id"
          :default-expanded-keys="level"
          style="height:120vh"
          :allow-drop="allowDrop"
          draggable
          accordion
          :allow-drag="allowDrag"
          lazy
          :load="loadNode"
          @node-click="handleNodeClick"
          @node-contextmenu="rihgtClick"
          @node-drag-start="ondeDrag"
        >
          <span slot-scope="{ node, data }">
            <i :class="data.icon" style="font-size:0.3rem" />
            <span style="padding-left:4px;font-size:0.3rem">{{ data.name }}</span>
          </span>
        </el-tree>

主要思路就是,在el-tree标签里添加:

<span slot-scope="{ node, data }">
            <i :class="data.icon" style="font-size:0.3rem" />
            <span style="padding-left:4px;font-size:0.3rem">{{ data.name }}</span>
</span>

注意:

这里用到了el-tree的懒加载所以没有绑定data属性。

懒加载代码是:

el-tree标签添加属性和方法:

:props=“Props”
lazy
:load=“loadNode”

data里声明props:

Props: {
children: ‘children',
label: ‘name',
isLeaf: ‘leaf'
}

在懒加载方法里,必须要给data定义icon属性,指明图标名称。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue指令只能输入正数并且只能输入一个小数点的方法

    vue指令只能输入正数并且只能输入一个小数点的方法

    这篇文章主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue mixins混入使用解析

    Vue mixins混入使用解析

    如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性,这时使用Vue mixins混入有很大好处,下面就介绍下Vue mixins混入使用方法,需要的朋友参考下吧
    2023-02-02
  • 在vue项目中使用Swiper插件详解

    在vue项目中使用Swiper插件详解

    这篇文章主要介绍了在vue项目中使用Swiper插件详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue中transition单个节点过渡与transition-group列表过渡全过程

    Vue中transition单个节点过渡与transition-group列表过渡全过程

    这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue使用枚举类型实现HTML下拉框步骤详解

    Vue使用枚举类型实现HTML下拉框步骤详解

    本文分步骤给大家介绍了Vue使用枚举类型实现HTML下拉框的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • vue3封装echarts组件最佳形式详解

    vue3封装echarts组件最佳形式详解

    这篇文章主要为大家介绍了vue3封装echarts组件最佳形式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 在vue项目中引入scss并使用scss样式详解

    在vue项目中引入scss并使用scss样式详解

    SCSS是一种CSS预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,这篇文章主要给大家介绍了关于在vue项目中引入scss并使用scss样式的相关资料,需要的朋友可以参考下
    2022-07-07
  • vue.js云存储实现图片上传功能

    vue.js云存储实现图片上传功能

    示对象存储是腾讯云提供的一种存储海量文件的分布式存储服务,本文主要介绍了用vue.js实现图片上传功能,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 误引用vuex-persistedstate导致用户信息无法清除问题及解决

    误引用vuex-persistedstate导致用户信息无法清除问题及解决

    这篇文章主要介绍了误引用vuex-persistedstate导致用户信息无法清除问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解Vue 开发模式下跨域问题

    详解Vue 开发模式下跨域问题

    本篇文章主要介绍了Vue 开发模式下跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论