前端界面读取本地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="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的数据读取