vue中用loadXmlFile解析xml文件将其用el-tree和el-table表示

在Vue中，可以使用loadXmlFile来解析XML文件，并将其展示在el-tree和el-table中。

首先，在<template>标签中添加el-tree和el-table组件，并分别绑定数据源：

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

然后，需要在<script>标签中定义treeData和tableData的初始值，并在mounted()函数中调用loadXmlFile方法加载XML文件并解析成JSON格式的数据。最后，将解析后的数据赋值给对应的数据源即可：

<script>
import { loadXmlFile } from 'xmlreader';

export default {
  data() {
    return {
      treeData: [],
      tableData: []
    };
  },
  mounted() {
    const xmlFilePath = '/path/to/xml/file.xml';
    loadXmlFile(xmlFilePath, (err, res) => {
      if (err) {
        console.error(err);
        return;
      }

      // 解析XML数据为JSON格式
      const jsonData = [];

      // TODO: 解析过程

      // 将解析后的数据赋值给数据源
      this.treeData = jsonData;
      this.tableData = jsonData;
    });
  }
};
</script>

需要注意的是，在上述代码中，TODO: 解析过程这一部分需要根据XML数据的具体结构进行逐步解析。例如，如果XML文件的结构如下所示：

<root>
  <node id="1" label="Node 1">
    <child id="11" label="Child 1-1"></child>
    <child id="12" label="Child 1-2"></child>
  </node>
  <node id="2" label="Node 2">
    <child id="21" label="Child 2-1"></child>
    <child id="22" label="Child 2-2"></child>
  </node>
</root>

那么，可以按照以下方式解析JSON数据：

const rootNode = res.root;
rootNode.children.forEach(node => {
  const jsonData = {
    id: node.attributes.id,
    label: node.attributes.label,
    children: []
  };

  node.children.forEach(childNode => {
    const childData = {
      id: childNode.attributes.id,
      label: childNode.attributes.label
    };
    jsonData.children.push(childData);
  });

  jsonArr.push(jsonData);
});

最后，将jsonArr作为treeData和tableData的值即可展示在el-tree和el-table中。