Vue components for nodes about vue-org-tree HOT 5 CLOSED

renderContent: function(h, data) {

  return h(MyVueComponent, {

    props: {

      foo: bar,

      bar: foo
    },
  });
}

<template>
    <div class="class">
    </div>
</template>

<script>
    import store from "../store";

    export default {
        props:['className', 'width'],
        data() {
            return {
            }
        },
        mounted() {
        },
        methods: {
        },
        computed: {
            class () {
                return this.$props.className;
            }
        }
    }
</script>

return h(TreeNodePerson, {
        props: {
            className: className
        }
    }, [h(TreeNodePerson, {
        props: {
            className: cls.join(' '),
            width: labelWidth,
        },
    }, childNodes)])

<template>
  <section>
    <div class="content">
          <vue-org-tree
            :data="data"
            :props="dataprops"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :render-content="renderContent"
            @on-expand="onExpand"
            @on-node-click="onNodeClick"/>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>


<script>

import { mapGetters } from 'vuex'
import Node from '@/components/Node'

export default {
  components: { Node },
  data () {
    return {
      data: { 'name': 'Company 1', 'business_id': 10, children: [] },
      horizontal: true,
      collapsable: true,
      expandAll: true,
      labelClassName: 'bg-white',
      dataprops: {
        label: 'id',
        expand: 'expand',
        children: 'children'
      }
    }
  },
  methods: {
    renderContent: function(h, data) {
      return h(CompanyNode, {
        props: {
          label: data.name,
          value: data.business_id
        },
      });
    },
    onExpand: function(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)
      }
    },
    onNodeClick: function(e, data) {
      this.$router.push({ name: 'Business', params: { id: data.id }})
    },
    collapse: function(list) {
      var _this = this
      list.forEach(function(child) {
        if (child.expand) {
          child.expand = false
        }

        child.children && _this.collapse(child.children)
      })
    },
    expandChange: function() {
      this.toggleExpand(this.data, this.expandAll)
    },
    toggleExpand: function(data, val) {
      var _this = this
      if (Array.isArray(data)) {
        data.forEach(function(item){
          _this.$set(item, 'expand', val)
          if (item.children) {
            _this.toggleExpand(item.children, val)
          }
        })
      } else {
        this.$set(data, 'expand', val)
        if (data.children) {
          _this.toggleExpand(data.children, val)
        }
      }
    }
  }
}

</script>

<template>
  <section>
    <div class="has-text-left">
      <p class="is-size-5 py-0 my-0 has-text-weight-medium has-text-black">{{ label }}</p>
      <p class="py-0 my-0 is-size-6 mt-0">{{ value }}</p>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    label: String,
    value: String
  }
}
</script>