Vue以弹窗形式实现导入功能

前言

由于个人工作原因，偏全栈，对于前端的总结还有些初出茅庐，后续会进行规整化的总结

对应的前端框架由：【vue】avue-crud表单属性配置（表格以及列）

最终实现的表单样式如下：

点击导入按钮

出现的画面如下：

正文

直奔主题，其vue的按钮样式：

<template>
  <basic-container>

    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">

      <template slot="menuLeft">

        <el-button type="primary"  size="small" @click="handleImpotExcel">导入</el-button> 

      </template>
    </avue-crud>

    <el-dialog title="导入"
                   append-to-body
                   :visible.sync="importExcelBox"
                   width="555px">
          <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
            <template slot="excelTemplate">
              <el-button type="primary" @click="handleTemplate">
                点击下载<i class="el-icon-download el-icon--right"></i>
              </el-button>
            </template>
          </avue-form>
        </el-dialog>

  </basic-container>
</template>

对应的样式如下：

export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },



        excelForm: {},
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: '/xxdetail/import'
            },
            {
              label: '模板下载',
              prop: 'excelTemplate',
              formslot: true,
              span: 24,
            }
          ]
        },

        importExcelBox: false,

其主要方法如下：

 methods: {

      handleTemplate() {
        window.open(`http://ip:10086/excel.xlsx`);
      },

      uploadAfter(res, done, loading, column) {
        window.console.log(res);
        this.excelBox = false;
        this.onLoadChild(this.page);
        done();
      },
      
      handleImpotExcel(){
        this.importExcelBox = true;
      },

更多的导入功能由后端实现，可结合我这篇文章：详细讲解Java使用EasyExcel函数来操作Excel表（附实战）