1.项目需求，后台响应的是xml文件，故在前端先做测试，解析本地xml文件

test.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <lbs>
  <lb>
    <label>合同编号</label>
    <text>123456</text>
  </lb>
  <lb>
    <label>合同名称</label>
    <text>租赁合同</text>
  </lb>
  <lb>
    <label>起始时间</label>
    <text>2019-12-27</text>
  </lb>
  <lb>
    <label>截止时间</label>
    <text>2020-12-26</text>
  </lb>
  </lbs>
  <table>
    <thead>
      <tr>
        <th>收费项目</th>
        <th>计费方式</th>
        <th>价格</th>
        <th>读数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>租金</td>
        <td>一口价</td>
        <td>5000</td>
        <td>
          <text>1</text>
          <edit>Y</edit>
        </td>
      </tr>
      <tr>
        <td>水费</td>
        <td>单价*用量</td>
        <td>7</td>
        <td>2</td>
      </tr>
      <tr>
        <td>电费</td>
        <td>单价*用量</td>
        <td>7</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</root>

2.读取文件

created(){
          this.file = this.readXML('../../../static/test.xml')
        // this.readXml('../../../static/test.xml')

      },
readXML(filePath) {
          // 创建一个新的xhr对象
          let xhr = null;
          if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
          } else {// IE
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
          }
          xhr.open('GET', filePath, false);
          xhr.overrideMimeType('text/html;charset=utf-8');
          xhr.send(null);
          console.log(xhr.responseText.replace(/\s*/g,""))
          let div = document.createElement("div");
          if(typeof xhr.responseText === "string")div.innerHTML = xhr.responseText.replace(/\s*/g,"");
          console.log(div.childNodes)
          this.htmlDeal(div.childNodes[1].childNodes)
        },

上面对文件去除了所有空格或者空白符  ：console.log(xhr.responseText.replace(/\s*/g,""))

附赠别人整理的js字符串去除空格：https://www.cnblogs.com/a-cat/p/8872498.html

3.解析文件

固定写死的写法，获取文件内容，组装成所需要的数据，然后v-for遍历渲染

htmlDeal(data){
          data.forEach(item=>{
            // console.dir(item)
            if(item.nodeName === "LBS"){
              let list = [];
              item.childNodes.forEach(item1 =>{
                let obj = {};
                if(item1.nodeName === "LB"){
                  item1.childNodes.forEach(item2=>{
                    if(item2.nodeName === "LABEL"){
                      obj.label = item2.textContent;
                    }else if(item2.nodeName === "TEXT"){
                      obj.value = item2.textContent;
                    }
                  })
                }
                list.push(obj);
              });
              this.titleList = list;
            }
            else if(item.nodeName === "TABLE"){
              let list = [];
              item.childNodes.forEach(item1 =>{
                let obj = {};
                if(item1.nodeName === "THEAD"){
                  item1.childNodes.forEach(item2 =>{
                    let aaa = [];
                    if(item2.nodeName === "TR"){
                      item2.childNodes.forEach((item3,index3) =>{
                        let obj1 = {};
                        if(item3.nodeName === "TH"){
                          obj1.value = item3.textContent;
                        }
                        aaa.push(obj1)
                      });
                    }
                    obj.head = aaa;
                    list.push(obj);
                  })
                }else if(item1.nodeName === "TBODY"){
                  let bbb = [];
                  item1.childNodes.forEach(item2 =>{
                    if(item2.nodeName === "TR"){
                      let ccc = [];
                      item2.childNodes.forEach((item3,index3) =>{
                        let obj2 = {};
                        if(item3.nodeName === "TD"){
                          console.log(item3.childNodes.length)
                          if(item3.childNodes && item3.childNodes.length > 1){
                            item3.childNodes.forEach(item4=>{
                              if(item4.nodeName === "TEXT")obj2.value = item4.textContent;
                              else if(item4.nodeName === "EDIT")obj2.edit = item4.textContent;
                            })
                          }else {
                            obj2.value = item3.textContent;
                          }
                        }
                        ccc.push(obj2)
                      });
                      bbb.push(ccc)
                    }
                  });
                  obj.body = bbb;
                  list.push(obj);
                  console.log(list)
                  this.tableList = list;
                }
              })

            }

          })
        },

在此记录，完结