vue element ui Excel导入导出功能 （vue-xlsx-table）

今天BiKABi整理一下之前写的导入和导出功能的笔记，这个导入是把Excel导入到表格中，导出就比较简单，就是个下载的地址而已，下面直接上代码

导入功能

1.首先我们需要安装一个插件vue-xlsx-table（npm安装插件的地址）
2.把下载好的插件引入挂载，这里就不多说怎么去引入挂载，地址文档有
3.这里我就展示2种，一种输入框一种下拉框
4.后面的操作看你自己的需求，我这个是可以点击新增一条数据的表，感兴趣你可以去看下我另一篇博客，上面写的很清楚 （element ui 新增一条表）

HTML部分

1.下拉框的定义和掉接口我就不展示了，根据自己需求加

<vue-xlsx-table @on-select-file="handleSelectedFile"><i class="el-icon-download"></i> 导入</vue-xlsx-table>
<el-table
        :data="detailedList"
        border
        @selection-change="handleSelectionChange"
        style="margin: 10px 0 0 0;"
      >
        <el-table-column type="selection" fixed align="center"></el-table-column>
        <el-table-column label="料号" align="center" prop="picSource">
          <template slot-scope="scope">
            <span v-if="scope.row.show">
              <el-input size="mini" placeholder="请输入内容" v-model="scope.row.partNo"></el-input>
            </span>
            <span v-else>{{scope.row.partNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="版次" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.show">
              <el-select v-model="scope.row.picVersion" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in options6"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </span>
            <span v-else>
              <el-select
                disabled
                v-model="scope.row.picVersion"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in options6"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-check"
              type="success"
              size="mini"
              @click="edit(scope.row,scope.$index)"
            >{{scope.row.show?'保存':"修改"}}</el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="delect(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

js部分

1.由于我们的Excel表头肯定是中文的，所以我们需要把名字转一下传给我们的table表
2.当然，我们的下拉框也要再从新赋值一下，这样才能对应上接口的中的数据，并选中
3.如果是联合新增一条数据的写法就需要用concat方法去添加，如果是直接导入就可以直接复制用=

// Excel导入
    handleSelectedFile(convertedData) {
      let { header: tableHeader, body: tableData } = convertedData;
      const arr = convertedData.body.map((item, index) => {
        let list1 = this.options6.filter(function(item1) {
          if (item1.dictLabel == item.版次) {
            return item1;
          }
        });
        return {
          partNo: item.料号,
          gradeName: item.品名,
        };
      });
      this.detailedList = this.detailedList.concat(arr);
      this.formData.bomList = this.formData.bomList.concat(arr);
    },

导出功能

HTML部分

<el-button icon="el-icon-download" type="warning" @click="importData">导出Excel</el-button>

JS部分

1.这里的导出我是直接调接口导出，this.$apiUrl.export这个是我封装的一个接口的写法而已，换成你自己的地址就可
2.如果调用接口返回的是一个接口路径直接用window.location.href就可，如果是返回的一个值，就需要一个接口去拼接，这样就比较安全，这个都根据后台怎么写去改的

//导出Excel
    async importData() {
      try {
        const res = await this.$postRequest.post(this.$apiUrl.export);
        console.log(res);
        if (res.code === 0) {
          window.location.href = this.$baseURL+"/common/download?fileName=" + res.msg +"&delete=" +true;
        } else {
          this.$message.error(msg);
        }
      } catch (e) {}
    },

这篇文章就分享到这，如有错误，请斧正，希望对你有帮助