前端界面读取本地xlsx格式的数据,实现树状结构数据的填充
项目中的需求是:要能从本地的文件中读取出树状数据。实现前提的条件:给出的.xlsx文件要有相应的格式要求,下来会给出详细的实现步骤
1.需要安装xlsx :npm install xlsx
引入依赖:import XLSX from "xlsx"
2.HTML
<el-upload ref="upload" action="/wm/upload/" :show-file-list="false" :on-change="readExcel" :auto-upload="false"> <el-button slot="trigger" size="mini" icon="el-icon-upload" type="primary"> 导入数据 </el-button> </el-upload> <el-tree :data="dataList" node-key="id" default-expand-all :expand-on-click-node="false"> <el-row class="custom-tree-node" style="width:100%" slot-scope="{ node, data }"> <el-col :span='18'>{{ node.label }}</el-col> // 自己项目中针对数据的增删改查 <el-col :span='6'> <el-button type="text" size="mini" @click="() => append(data,'1','currentNode')"> 新增 </el-button> <el-button type="text" size="mini" @click="() => edit(node,data,'2')"> 编辑 </el-button> <el-button type="text" size="mini" @click="() => remove(node, data)"> 删除 </el-button> </el-col> </el-row> </el-tree>
3.js
// 导入数据 readExcel (file) { let _this = this const fileReader = new FileReader(); fileReader.onload = (ev) => { try { const data = ev.target.result; const workbook = XLSX.read(data, { type: 'binary', }); // 默认读取.xlsx中的数据 const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets['Sheet1']); // 对于读取的数据处理逻辑的 let sheetArrayNew = _this.convertToTreeData(sheetArray, 0) _this.dataList = sheetArrayNew } catch (e) { this.$message.warning('文件类型不正确!'); return false; } }; fileReader.readAsBinaryString(file.raw); },
_this.convertToTreeData()是针对自己给出的.xlsx规则,对数据做逻辑处理的方法,这里借鉴一下,大家可以根据自己的规则,做相应的处理
// data 是从xslx中读到的数据 pid 是父级id
const convertToTreeData = function(data, pid) { const result = [] let temp = [] for (let i = 0; i < data.length; i++) { if (data[i].pid === pid) { const obj = { 'label': data[i].label, 'value': data[i].value } temp = this.convertToTreeData(data, data[i].value) if (temp.length > 0) { obj.children = temp } result.push(obj) } } return result }
3. xlsx的表格规则
4.实现的界面效果如下
总结:目前是只支持.xlsx格式文件,且sheet1的数据读取