Used in VUEvue2-org-tree

The installation

npm i vue2-org-tree
Copy the code

vueThe use of

  1. Introducing vue2 – org – tree

    Import Vue from "Vue "; import Vue2OrgTree from "vue2-org-tree"; Vue.use(Vue2OrgTree) # The second partial installation is shown belowCopy the code

  2. A separate reference to the vue2-org-tree style is required

  3. use

    # template <vue2-org-tree :data="data" @on-node-click="onNodeClick" :render-content="renderContent" /> # script import Vue2OrgTree from "vue2-org-tree"; import './tree.less'; export default { components: {Vue2OrgTree}, data(){return {data:[]}, methods:{// click onNodeClick(e, data) { // do something this.$emit("onNodeClick", data); }, // render methods that can assemble their own tags, Render Content(h, node) {return h('div', {}, [h('p', {}, node.id), // render content (h, node) {return h('div', {}, node.id), Node.ledgername),// field for name 'test 1']); }}}Copy the code

The data format

  • The format of the tree’s incoming displaydataThe general structure is as follows

    Id and fatherId are customizable, but subsets of the fatherId must use the children field

let data=[
    {
        id:1.fatherId:null.ledgerName:'000001'.children:[
            {
              id:1.fatherId:null.ledgerName:'000001',}]}, {id:1.fatherId:null.ledgerName:'000002'.children:[
          {
            id:1.father:null.ledgerName:'100002'.children:[]}]}]Copy the code
  • Data format conversion 
    /** * data tree structure conversion */
export function treeStructure({ data, fatherId, id }) {
    // If there is no ID in the list, add an ID field to display the multi-tree component
    data = JSON.parse(JSON.stringify(data));
    data = data.map(item= > {
        if(! item.hasOwnProperty(id)) item['id'] = item[id];
        return item;
    })
    // Layer 1 data
    let parents = data.filter(item= > item[fatherId] === item[id]);
    // There is data for the parent node
    let childrens = data.filter(item= >item[fatherId] ! == item[id]);function translator(parents, childrens) {
        parents.forEach(parent= > {
            childrens.forEach((children, index) = > {
                // Find the parent of the child
                if (children[fatherId] === parent[id]) {
                    // Temp is not required
                    // Make a deep copy of the child node data
                    let temp = JSON.parse(JSON.stringify(childrens));
                    // Remove the current child node from temp. Temp is the new child node data. In order to recurse, the child node traversal is less
                    temp.splice(index, 1);
                    // Add the children attribute to push
                    parent.children ? parent.children.push(children) : parent.children = [children];
                    // Pass childrens can also be used
                    translator([children], temp);
                }
            })
        })
    }
    translator(parents, childrens);
    // Return the final result
    return parents;
}


/ / use
let data = treeStructure({
  data: infoList || [],
  fatherId: "superLedgerNo".id: "id",})Copy the code

reference

vue2-org-tree Github

Explain the structure diagram of vue-org-tree