当前位置:Gxlcms > JavaScript > vue.js树形组件之删除双击增加分支实例代码

vue.js树形组件之删除双击增加分支实例代码

时间:2021-07-01 10:21:17 帮助过:10人阅读

html代码:

  1. <script type="text/x-template" id="item-template">
  2. <li>
  3. <div :class="{bold: isFolder}" @click="toggle">
  4. {{model.name}}
  5. <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  6. </div>
  7. <!--v-show控制当前元素的display属性,根据v-show里面的值来判断,true显示,false不显示-->
  8. <ul v-show="open" v-if="isFolder">
  9. <!--model用于双向绑定数据-->
  10. <item class="item" v-for="model in model.children" :model="model">
  11. </item>
  12. </ul>
  13. </li>
  14. </script>
  15. <ul id="demo">
  16. <item class="item" :model="treeData">
  17. </item>
  18. </ul>

这里使用x-template全局属性,页面加载不显示,但是可供js使用

js代码:

  1. <script>
  2. //加载树形结构初始数据,可用ajax获取
  3. var data = {
  4. name: 'My Tree',
  5. children: [
  6. { name: '一级' },
  7. { name: '一级' },
  8. {
  9. name: '一级有子菜单',
  10. children: [{
  11. name: '二级有子菜单',
  12. children: [
  13. { name: '三级' },
  14. { name: '三级' }
  15. ]
  16. },
  17. { name: '二级' },
  18. { name: '二级' }
  19. ]
  20. }
  21. ]
  22. }
  23. Vue.component('item', {//获取全局组件(可用于注册组件)
  24. template: '#item-template',
  25. props: {
  26. model: Object//定义model数据格式
  27. },
  28. data: function() {
  29. return {
  30. open: false//vue对样式改变操作,true显示 false不显示
  31. }
  32. },
  33. computed: {//读取写入函数,不写get,set则为只读
  34. isFolder: function() {
  35. return this.model.children
  36. }
  37. },
  38. methods: {
  39. toggle: function() {
  40. if(this.isFolder) {
  41. this.open = !this.open//打开树形结构
  42. }
  43. }
  44. }
  45. })
  46. <li><a href="http://www.wfqcp.com/" rel="external nofollow" >潍坊长途汽车站</a></li>
  47. var demo = new Vue({//创建一个vue实例,绑定树形数据
  48. el: '#demo',
  49. data: {
  50. treeData: data
  51. }
  52. })
  53. </script>

以上所述是小编给大家介绍的vue.js树形组件之删除双击增加分支实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

人气教程排行