经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue中的el-tree @node-click传自定义参数
来源:jb51  时间:2022/8/15 16:59:25  对本文有异议

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

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

给el-tree添加自定义图标

  1. <el-tree
  2. v-if="treeVisible"
  3. ref="tree"
  4. :props="Props"
  5. node-key="id"
  6. :default-expanded-keys="level"
  7. style="height:120vh"
  8. :allow-drop="allowDrop"
  9. draggable
  10. accordion
  11. :allow-drag="allowDrag"
  12. lazy
  13. :load="loadNode"
  14. @node-click="handleNodeClick"
  15. @node-contextmenu="rihgtClick"
  16. @node-drag-start="ondeDrag"
  17. >
  18. <span slot-scope="{ node, data }">
  19. <i :class="data.icon" style="font-size:0.3rem" />
  20. <span style="padding-left:4px;font-size:0.3rem">{{ data.name }}</span>
  21. </span>
  22. </el-tree>

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

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

注意:

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

懒加载代码是:

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

  1. :props=“Props
  2. lazy
  3. :load=“loadNode

data里声明props:

  1. Props: {
  2. children: children',
  3. label: ‘name',
  4. isLeaf: leaf'
  5. }

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号