vue实现表格的导入，导出操作

表格导入导出
首先安装：

npm install vue-json-excel//表格导出
npm install vue-xlsx-table//表格导入

在vue的main.js文件中加入全局配置

//导入表格
import vueXlsxTable from 'vue-xlsx-table'
Vue.use(vueXlsxTable, {rABS: false})
//导出表格
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

在页面中如下使用
主要代码如下

<template>
  <div>
    <!-- :inline="true" 表单一行显示 -->
    <el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px">
      <el-form-item prop="Contract">
        <el-input v-model="searchMap.Contract" placeholder="合同号" style="width: 200px"></el-input>
      </el-form-item>
      <!-- 重置会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效 -->
      <el-form-item prop="PlanDate">
        <!-- value-format 是指定绑定值的格式 -->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd"
          v-model="searchMap.PlanDate"
          type="date"
          placeholder="计划发货日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 功能列表 -->
    <el-form ref="exelForm" :inline="true">
      <el-form-item prop="Importexel">
        <vue-xlsx-table @on-select-file="handleSelectedFile">导入EXCEL</vue-xlsx-table>
      </el-form-item>
      <el-form-item prop="explodexel">
        <download-excel
          class="export-excel-wrapper"
          :data="list"
          :fields="json_fields"
          name="订单信息表.xls"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <vue-xlsx-table type="primary" size="small">导出EXCEL</vue-xlsx-table>
        </download-excel>
      </el-form-item>
      <el-form-item prop="Importexel">
        <vue-xlsx-table>下推排程</vue-xlsx-table>
      </el-form-item>
    </el-form>
    <!-- 订单表格-->
    <el-table
      :data="list"
      max-height="600"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="GoodNo" label="货号" width="90"></el-table-column>
      <el-table-column prop="Enname" label="英文名称" width="300"></el-table-column>
      <el-table-column prop="Cnname" label="中文名称" width="120"></el-table-column>
      <el-table-column prop="Rcvs" label="Rcvs" width="80"></el-table-column>
      <el-table-column prop="Nums" label="数量" width="60"></el-table-column>
      <el-table-column prop="Tnums" label="托数" width="60"></el-table-column>
      <el-table-column prop="Contract" label="合同" width="120"></el-table-column>
      <el-table-column prop="RCty" label="R_Cty" width="80"></el-table-column>
      <el-table-column prop="PlanDate" label="计划发货日期" width="120"></el-table-column>
      <el-table-column prop="RealDate" label="实际发货日期" width="120"></el-table-column>
      <el-table-column prop="ShpId" label="Shp_Id" width="160"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

核心导出代码如下

<download-excel
    class = "export-excel-wrapper"
    :data = "list"
    :fields = "json_fields"
    name = "filename.xls">
    <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
    <!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
</download-excel>

核心导入代码如下

<vue-xlsx-table @on-select-file="handleSelectedFile">导入EXCEL</vue-xlsx-table>

相关的函数如下

export default {
  data() {
    return {
      list: [], //表格数据来源
      json_fields: {
        货号: "GoodNo",
        英文名称: "Enname",
        中文名称: "Cnname",
        Rcv: "Rcvs",
        数量: "Nums",
        托数: "Tnums",
        合同哈: "Contract",
        R_Cty: "RCty",
        计划发货日期: "PlanDate",
        实际发货日期: "RealDate",
        Shp_Id: "ShpId"
      },
      json_meta: [
        [
          {
            key: "charset",
            value: "utf-8"
          }
        ]
      ],
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示10条数据
      searchMap: {
        // 条件查询绑定的条件值
        Contract: "",
        PlanDate: ""
      },
      multipleSelection:{}//表格多选数据
    };
  },

  created() {
    // 初始化获取列表数据
    this.fetchData();
  },

  methods: {
    //表格导入功能实现
    handleSelectedFile(convertedData) {
      let data = convertedData.body;
      this.excelList = [];
      data.forEach(item => {
        let dataitem = {
          GoodNo: item.货号,
          Enname: item.英文名称,
          Cnname: item.中文名称,
          Rcvs: item.Rcv,
          Nums: item.数量,
          Tnums: item.托数,
          Contract: item.合同哈,
          RCty: item.R_Cty,
          PlanDate: item.计划发货日期,
          RealDate: item.实际发货日期,
          ShpId: item.Shp_Id
        };
        this.excelList.push(dataitem);
      });
      console.log(this.excelList);
      //this.excelList = JSON.stringify(this.excelList);
      salesApi.orderexpolexcel(this.excelList).then(res => {
        //这是我自己封装过的axios请求，按自己的发送请求就行了
        if (res.data.result == true) {
          this.$message({
            message: res.data.message,
            type: "success"
          });
          this.fetchData();
          //我这里是在保存成功后请求了一遍列表接口，用来刷新列表
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
  }