vue 前端解析xml文件及前端显示类似EXCEL表格操作

最近项目里面出现了一些奇怪的操作，前端解析xml文件，把内容展示出来，自己查了很多资料，下面是一些自己用的的一些常用方法。

 

 

1.引入x2js 

·可以到GitHub主页去下载库代码
地址 ：https://github.com/abdmob/x2js

 npm命令  

 npm i x2js

 2.使用

在项目main.js 中引入 

import x2js from 'x2js' //xml数据处理插件

Vue.prototype.$x2js = new x2js() //创建x2js对象

xml转json方法：后台返回的是一个字符串

json转xml方法：

2.使用handsontable来处理显示数据

·安装

npm install handsontable @handsontable/vue

在main.js引入css 

 import 'handsontable/dist/handsontable.full.css';

在页面中使用

import {HotTable } from '@handsontable/vue';


 components: { HotTable },

在template中使用

 

hotSettings: {
          data: [ //数据，可以是数据，对象
          ],
          colHeaders: [], //自定义列表头or 布尔值
          rowHeaders: true,
          className: 'htCenter',
          afterChange: function (changes, source) { //数据改变时触发此方法
               var that =this;
               that.SaveList = that.getData()
            
               console.log(that.SaveList)
            
               return that.getData()
          },
          readOnly:true, // 设置只读属性
           cellProperties :{
           readOnly:true
         },
          licenseKey: 'non-commercial-and-evaluation' // 填写key下方就不会提示一串字符。
        },

部分属性介绍：

className: 'htCenter htMiddle', //表格显示样式

// startRows: 6, //初始行列数

// startCols: 6,

// minRows: 1, //最小行列

// minCols: 1,

// maxCols:5,//最大列数

// maxRows:6 // 最大行数

hiddenColumns: { // 隐藏自定义的列

columns: [5],

indicators: true //是否折叠

},

colWidths:'80', //列宽

// rowHeights:'40', // 行高

autoColumnSize:true, 是否自动填充

调用方法：

this.$refs.testHot1.hotInstance // 打印这个里面有很多方法自行查看

this.$refs.testHot1.hotInstance.loadData( this.hotSettings.data) //加载数据

// console.log(this.$refs.testHot.hotInstance.getData()) //获取数据

// console.log(this.$refs.testHot.hotInstance.getSourceData()) 这里要注意，如果使用this.hotSettings.data 保存表格数据，拖拽完以后数据的顺序将不会更新，因此使用 this.$refs.testHot.table.getData(); 来获取数据，获取的数据格式为二维数组。

一些简单的操作即可对一般数据进行展示，改变的表格数据会同步改变，只需要把队友的这个数据打印查看处理一下就可以，非常方便，至于样式我没怎么研究要自己看文档噢。