TreeExample.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <div>
  3. <h1>树控件</h1>
  4. <TreeViewNode v-for="data in categories"
  5. :node="data"
  6. :key="'asset-category-' + data.id"
  7. :isRoot="true"
  8. :isShowCheck="true"
  9. v-on:nodeSelect="categorySelect">
  10. </TreeViewNode>
  11. <div>选择的节点: {{ selectedNode.id }}.{{ selectedNode.text}}</div>
  12. </div>
  13. </template>
  14. <script>
  15. import TreeViewNode from "@/tree/index.js";
  16. export default {
  17. name: 'date-example',
  18. data: function () {
  19. return {
  20. categories: [
  21. {
  22. id: "1",
  23. text: "树节点1",
  24. childrenDatas: [
  25. {
  26. id: "1-1",
  27. text: "树节点1-1"
  28. }, {
  29. id: "1-2",
  30. text: "树节点1-2"
  31. }
  32. ]
  33. }, {
  34. id: "2",
  35. text: "树节点2"
  36. }, {
  37. id: "3",
  38. text: "树节点3"
  39. },
  40. ],
  41. selectedNode: {}
  42. }
  43. },
  44. components: {
  45. TreeViewNode,
  46. },
  47. methods: {
  48. /**
  49. * 类别选择发生改变
  50. */
  51. categorySelect: function (node) {
  52. node.selected = !node.selected;
  53. this.selectedNode = node;
  54. },
  55. }
  56. }
  57. </script>
  58. <style>
  59. </style>