TreeExample.vue 1.2 KB

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