vue前端解析xml⽂件及前端显⽰类似EXCEL表格操作最近项⽬⾥⾯出现了⼀些奇怪的操作，前端解析xml⽂件，把内容展⽰出来，⾃⼰查了很多资料，下⾯是⼀些⾃⼰⽤的的⼀些常⽤⽅法。
1.引⼊x2js
<script type='text/javascript' src="xml2json.js"></script>刘松仁个人资料
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 = Data()
console.log(that.SaveList)
Data()
},
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, 是否⾃动填充
调⽤⽅法：
情侣头像 一男一女情头2021this.$stHot1.hotInstance // 打印这个⾥⾯有很多⽅法⾃⾏查看
this.$stHot1.hotInstance.loadData( this.hotSettings.data) //加载数据
隐藏的文件怎么显示出来// console.log(this.$Data()) //获取数据
// console.log(this.$SourceData()) 这⾥要注意，如果使⽤this.hotSettings.data 保存表格数据，拖拽完以后数据的顺序将不会更新，因此使⽤ this.$Data(); 来获取数据，获取的数据格式为⼆维数组。
⼀些简单的操作即可对⼀般数据进⾏展⽰，改变的表格数据会同步改变，只需要把队友的这个数据打印查看处理⼀下就可以，⾮常⽅便，⾄于样式我没怎么研究要⾃⼰看⽂档噢。