elementUi Tree组件通过导入xml或者json生成TreeData

1. 先把对应数据（json/xml）转为Tree需要的数据

2. 引用"x2js.js"第三方库（地址）

function exportFn(xml) {
    var xx = {
        nodes: []
    }
    isObject(xml) ? getNodes(xml, '', 0, xx) : getNodesArr(xml, '', 0, xx);
    var getData = uniqu(xx.nodes);
    let sourceList = bulid(getData)
    console.log(sourceList)
    return formaterTreeData(sourceList);
}

function bulid(nodes) {
  var topNodes=[];let i = 0;
    if(Array.isArray(nodes)&&nodes.length>0){
      nodes.forEach((node) => {
        var parentName=node.parentName;
        if(parentName === ''){
          topNodes.push(node);
          return true;
         }
         nodes.forEach(function(parNode) {
          var name = parNode.name;
          if (parentName!=='' && (parentName==name || parentName == parNode.nodeName)) {
            parNode.children.push(node); 
            return true;
          } 
         })
      })
    }
    var root= { name: '', label:'',children:[]};
   
    if (topNodes.length == 1) {
  
        root = topNodes[0];
  
    } else { 
        root.children.push(topNodes); 
    } 
    return root
}

function uniqu(nodes) {
  let obj = {};
  let arr = [];
  nodes.forEach((node, index) => {
    obj[node.name] = node;
  })
  for (let i in obj){
    arr.push(obj[i])
  }
  return arr;
}

function getProType(val) {
  return Object.prototype.toString.call(val)
}

function getNodes(curObj, parentKey = '', idx = 0, obj) {
  let formObj = {
    name: '',
    label: '',
    parentName: '',
    nodeName: ''
  }
  for (let key in curObj) {
      let nodeName = '';
      formObj = {
        name: '',
        label: '',
        parentName: '',
        nodeName: ''
      }
      if (getPropertype(curObj[key]) === 'Object' || Array.isArray(curObj[key])) {
         formObj.children = []
      }
      nodeName = parentKey + (parentKey === '' ? '' : '>') + key;
      formObj.label = `key:` + getPropertype(curObj[key]);
      formObj.name = nodeName;
      formObj.parentName = parentKey;
      formObj.nodeName = '';  
      formObj.nodeName = key;
      obj.nodes.push(formObj);
      if (isObject(curObj[key])) {         
          getNodes(curObj[key], nodeName, idx + 1, obj);
      } else if (Array.isArray(curObj[key])) {
          nodeName += '[]';
          formObj.label = `key:` + getPropertype(curObj[key]),
          formObj.name = nodeName
         getNodesArr(curObj[key], nodeName, idx + 1, obj);
      }
  }
}

function getNodesArr(curArr, parentKey = '', idx = 0, obj) {
  if (curArr.length !== 0) {
      curArr.forEach((val, index) => {
          if (isObject(val)) {
              getNodes(val, parentKey, idx + 1, obj);
          } else if (Array.isArray(val)) {
            getNodesArr(val, parentKey, idx + 1, obj);
          }
      });
  }
}

function isObject(val) {
  return Object.prototype.toString.call(val) === '[object Object]';
}

function getPropertype(val) {
  let outputName = Object.prototype.toString.call(val);
  let value;
  switch (outputName) {
  case '[object Object]':
      value = 'Object';
      break;
  case '[object Number]':
      value = 'Number';
      break;
  case '[object String]':
      value = 'String';
      break;
  default:
      value = 'Array';
      break;
  }
  return value;
}

function formaterTreeData(params) {
    let treeData = params.name === '' ? params.children[0] : params.children;
    let arr = [];
    if (treeData.length === 0) {
        arr.push(params);
    } else {
        treeData.forEach((value, index) => {
            arr.push(value);
        });
    }
    if (arr[0].length > 1) {
        return [{
            name: '',
            label: '',
            children: [...arr]
        }];
    } else {
        return arr;
    }
}

 

完整代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div id="div1">
        <child :level="2">Hello world!</child>
        <children :level="levelData">Hello world!</children>
        <el-button @click="impBtn">导入</el-button>
        <el-input 
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
        <el-tree :props="treeProps" :data="data"></el-tree>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./handle.js"></script>
<script src="./x2js.js"></script>
<script>new Vue({
  el:"#div1",
  data() {
    return {
      levelData: 2,
      textarea: '',
      treeProps: {
          label: 'nodeName',
          children: 'children'
      },
      data: []
    }
  },
  methods:{
    impBtn(){
      var x2js = new X2JS();
      var jsonObj;
      try {
        jsonObj = JSON.parse(this.textarea);
      } catch (error) {
        jsonObj = x2js.xml_str2json( this.textarea );
      }
      if (jsonObj === null) {
        alert("输入格式不对");
        return;
      }
      this.data = exportFn({xml: jsonObj})
    }
  }
})
</script>
</html>

 

posted @ 2019-06-05 10:11  -e  阅读(1473)  评论(0)  编辑  收藏  举报