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

目录
  • el-tree @node-click传自定义参数
  • 给el-tree添加自定义图标

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属性，指明图标名称。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据. 增加节点,点击确定后局部刷新,渲染新数据. 源码 element组件样式 <el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-

  • vue基于Element构建自定义树的示例代码

    vue基于Element构建自定义树的示例代码

    说明 做项目的时候要使用到一个自定义的树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式,于是基于它封装了一个可以增.删.改的树形组件,现在分享一下它的使用与实现. 控件演示 github上挂的gif可能会比较卡,有没有大佬知道还有哪里可以挂静态资源的,谢谢..! 控件使用 概要 基于element-ui树形控件的二次封装 提供编辑.删除节点的接口 提供一个next钩子,在业

  • Vue使用el-tree 懒加载进行增删改查功能的实现

    Vue使用el-tree 懒加载进行增删改查功能的实现

    关于vue的树形展示 使用到项目:以树的形式异步展现 效果图先放: 找到element-ui的官方文档,el-tree.(地址:https://element.eleme.cn/#/zh-CN/component/tree ) 项目需求:以懒加载的形式展示,目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构 那我们现在开始吧 一. 懒加载:Tree的懒加载,用一个属性控制:lazy.使用lazy,就要使用load来加载数据进行渲染树 原理:初始化触发load函数先加载初始数据,通过点

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

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

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

    目录 el-tree @node-click传自定义参数 给el-tree添加自定义图标 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,

  • vue中this.$http.post()跨域和请求参数丢失的解决

    目录 this.$http.post()跨域和请求参数丢失 this.http.post()参数需注意 this.$http.post()跨域和请求参数丢失 methods: { research: function () { //post请求远程资源 this.$http.post( //请求的url "http://www.hefeixyh.com/login.html", //请求参数,不能以get请求方式写:{params: {userName: "root123&q

  • 详解Vue中的filter与directive

    目录 vue自定义指令--directive 全局指令 局部指令 使用 钩子函数(均为可选) 使用及参数 vue中的过滤器分为两种:局部过滤器和全局过滤器 过滤器可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示(官方文档) <!-- 在双花括号中 --> {{ message | capitalize }} <!--

  • vue select change事件如何传递自定义参数

    目录 select change事件传递自定义参数 @change函数传自定义参数 实例 select change事件传递自定义参数 今天记录一个小问题,最近get到的一个方法,不太常用,记录一下,增强记忆吧. 之前在vue项目中,也经常使用select标签,也经常用change事件,经常用的change事件中,一直有个默认参数,就是选中的选项的信息,最近一个需求除了需了选中项信息外,还需要其他的参数. 今天记录一下这种传参方式,直接上代码. // 普通用法,没有自定义参数 @change="

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • vue中使用elementui实现树组件tree右键增删改功能

    vue中使用elementui实现树组件tree右键增删改功能

    功能描述: 1.右击节点可进行增删改 2.可对节点数据进行模糊查询 3.右击第一级节点可以进行同级节点增加 4.双击节点或点击修改节点 都可以对节点获取焦点并进行修改,回车修改成功 5.可对节点进行拖拽,实现节点移动功能 效果图: 完整代码: <template> <div class="lalala tree-container"> <el-input placeholder="输入关键字进行过滤" v-model="fil

  • vue中使用input[type="file"]实现文件上传功能

    注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

  • vue 中的动态传参和query传参操作

    Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query.例如/router1?id=456 query 方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时,

随机推荐