后台管理系统导入导出下载模板 (自用,自用,自用)

最新推荐文章于 2024-08-07 17:19:02 发布

fan9wei10n9

最新推荐文章于 2024-08-07 17:19:02 发布

阅读量366

点赞数

文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/jimfang123/article/details/120412322

版权

本文介绍了如何在后台管理系统中实现导入和导出功能。提供了导入模板的格式及组件代码，强调导入功能使用了mixins混入组件。同时，讨论了导出功能的实现，特别是与后端数据格式协商的重要性。下载模板的实现相对简单，但也需要与后端配合确定合适的数据格式。

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

导入模板(模板格式如下)

我把导入写成了一个组件,需要的参数如下:

<concise-import customTitle="标题" url="后端给的导入接口"/>

导入模板组件代码

<template>
  <div class="concise-import concise-button">
    <div @click="visible = true">
      <slot>
        <base-button>{
  { baseTitle }}</base-button>
      </slot>
    </div>

    <el-dialog
      :visible.sync="visible"
      width="25%"
      :append-to-body="true"
    >
      <template #title>
        <base-title style="padding: 0;" :custom-title="customTitle"></base-title>
      </template>
      <el-row style="padding: 0 10px;color: var(--color-primary);">
        <el-row style="font-size: 0.8em;">
          文件后缀名必须为 {
  { accept }},文件大小不得大于10M,最多支持导入10000条数据。
        </el-row>

        <div flex="main:between cross:center" style="padding: 10px 0;">
          <el-upload
            class="inline-block"
            :accept="accept"
            action="#"
            :on-change="importClick"
            :show-file-list="false"
            :auto-upload="false"
          >
            <div flex="cross:center" style="border: 1px solid rgb(96, 125, 139);padding: 2px;border-radius: 6