master

分支 (2)

管理

管理

master

gh-pages

vue-org-tree
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>OrgTree Example</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="dist/index.js"></script>

    <style>
      @import "dist/style.css";
      .selected-node {
        background: tomato;
      }
      .bg_node {
        cursor: pointer;
      }
    </style>
  </head>
<body>
  <div id="app">
    <div>
      <vue2-org-tree
        :data="tree"
        collapsable
        :label-width="90"
        :label-class-name="labelClass"
        :render-content="renderContent"
        @on-expand="onExpand"
        @on-node-click="onNodeClick"
        @on-node-mouseover="onNodeMouseOver"
        @on-node-mouseout="onNodeMouseOut"
        selected-class-name="selected-node"
        selected-key="selectedKey"
      />
    </div>

  </div>

  <script>
    new Vue({
      el: '#app',
      data: () => ({
        tree: {
          label: 'Owner',
          children: [{
            label: 'Label 1'
          },{
            label: 'Label 2'
          },{
            label: 'Label 3'
          }]
        }
      }),
      methods: {
        labelClass (data) {
          return "bg_node";
        },
        renderContent (h, data) {
          return data.label;
        },
        onExpand (e, data) {
          if ('expand' in data) {
            data.expand = !data.expand
            if (!data.expand && data.children) {
              this.collapse(data.children)
            }
          } else {
            this.$set(data, 'expand', true)
          }
        },
        collapse (nodes) {
          nodes.forEach(node => {
            if (node.expand) {
              node.expand = false
            }

            node.children && this.collapse(node.children)
          })
        },
        onNodeClick (e, data) {
          console.log('CLICK', e);
          this.$set(data, 'selectedKey', !data['selectedKey']);
        },
        onNodeMouseOver(e, data) {
          console.log('MOUSE OVER', e);
        },
        onNodeMouseOut(e, data) {
          console.log('MOUSE OUT', e);
        }
      }
    })
  </script>
</body>
</html>