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

最新推荐文章于 2024-08-06 14:48:00 发布

2b勿扰

最新推荐文章于 2024-08-06 14:48:00 发布

阅读量2w

点赞数 9

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41181778/article/details/105008524

版权

本文介绍了在Vue项目中如何实现表格数据的导入和导出功能。首先需要进行相关安装，然后在main.js中配置全局设置。在具体页面中，通过调用特定的代码段来实现数据的导入和导出。核心代码包括导出和导入的实现，以及一些辅助函数。

摘要由CSDN通过智能技术生成

表格导入导出
首先安装：

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">