在vue中读取本地的xml文件并将其用el-tree表示出来

在Vue中读取本地的XML文件并将其转换为数组数据，可以使用JavaScript内置的XML解析器DOMParser。具体步骤如下：

1. 首先在Vue组件的data选项中定义一个空数组，用于存放XML转换后的数据。

   data() {
     return {
       treeData: []
     }
   }
   

2. 在Vue组件的methods选项中定义一个方法loadXmlFile，用于读取XML文件并将其转换为数组数据。

   methods: {
     loadXmlFile(file) {
       const reader = new FileReader()
       reader.onload = (event) => {
         const parser = new DOMParser()
         const xmlDoc = parser.parseFromString(event.target.result, "text/xml")
         const rootNode = xmlDoc.documentElement
         this.treeData.push(this.getNodeData(rootNode))
       }
       reader.readAsText(file)
     },
   
     getNodeData(node) {
       let data = {
         label: node.nodeName,
         children: []
       }
       const attributes = node.attributes
       for (let i = 0; i < attributes.length; i++) {
         const attr = attributes[i]
         data[attr.name] = attr.value
       }
       const childNodes = node.childNodes
       for (let i = 0; i < childNodes.length; i++) {
         const childNode = childNodes[i]
         if (childNode.nodeType === Node.ELEMENT_NODE) {
           data.children.push(this.getNodeData(childNode))
         }
       }
       return data
     }
   }
   

3. 在Vue组件的template选项中使用el-tree组件来呈现转换后的数据。

   <template>
     <el-tree :data="treeData"></el-tree>
   </template>
   

4. 最后，在Vue组件的mounted生命周期钩子中调用loadXmlFile方法来读取XML文件并将其转换为数组数据。

   mounted() {
     const fileInput = document.getElementById('fileInput')
     fileInput.addEventListener('change', () => {
       const files = fileInput.files
       for (let i = 0; i < files.length; i++) {
         const file = files[i]
         if (file.type === 'text/xml') {
           this.loadXmlFile(file)
         }
       }
     })
   }
   

   注意：在HTML文件中需要定义一个input元素，并设置id属性为'fileInput'，用于用户选择本地的XML文件。

   <input id="fileInput" type="file">