经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
iview实现select tree树形下拉框的示例代码
来源:jb51  时间:2018/12/24 10:13:33  对本文有异议

本文介绍了iview实现select tree树形下拉框的示例代码,分享给大家,具体如下:

html部分

  1. <Tree :data="treeData" ref="tree" :render="renderContent"></Tree>

数据部分

  1. export const treeData= [
  2. {
  3. title: 'parent 1',
  4. expand: true,
  5. selected: true,
  6. value: '1',
  7. children: [
  8. {
  9. title: 'parent 1-1',
  10. expand: true,
  11. value: '11',
  12. children: [
  13. {
  14. value: '111',
  15. title: 'leaf 1-1-1'
  16. },
  17. {
  18. value: '112',
  19. title: 'leaf 1-1-2'
  20. }
  21. ]
  22. },
  23. {
  24. title: 'parent 1-2',
  25. value: '12',
  26. expand: true,
  27. children: [
  28. {
  29. value: '121',
  30. title: 'leaf 1-2-1'
  31. },
  32. {
  33. value: '122',
  34. title: 'leaf 1-2-2'
  35. }
  36. ]
  37. }
  38. ]
  39. }
  40. ];

js部分

  1. // 子节点的option
  2. renderContent (h, { root, node, data }) {
  3. return h('Option', {
  4. style: {
  5. display: 'inline-block',
  6. margin: '0'
  7. },
  8. props:{
  9. value: data.value
  10. }
  11. }, data.title);
  12. },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持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号