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>