ImportTemplate 导入模板

导入模板

基础用法

对 el-dialog 和 el-upload 的二次封装，主要用于上传 xls 文件

导入模板文件

导入数据

导入模板文件

<template>
  <div>
    <jp-button @click="show">导入</jp-button>
    <jp-button @click="show2">导入2</jp-button>
    <jp-button @click="show3">导入3</jp-button>

    <jp-import-template width="80vw" ref="dialog"></jp-import-template>
    <jp-import-template ref="dialog2" title="导入数据" width="50%" @onSure="_onSure">
      <jp-form inline>
        <jp-form-item label="选择商家">
          <jp-input></jp-input>
        </jp-form-item>
      </jp-form>

      <div slot="footer">
        <p>我是footer</p>
      </div>
    </jp-import-template>

    <jp-import-template :multiple="false" action="https://jsonplaceholder.typicode.com/posts/" ref="dialog3"></jp-import-template>
  </div>
</template>

<script>
export default {
  methods: {
    show() {
      this.$refs.dialog.show()
    },
    show2() {
      this.$refs.dialog2.show()
    },
    show3() {
      this.$refs.dialog3.show()
    },
    _onSure() {
      console.log('_onSure')
      this.$refs.dialog2.hide()
    }
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
title	标题	string	—	导入模板文件
tips	提示语	string	—	提示：仅允许导入“xls” 或 “xlsx” 格式文件
accept	接受上传文件类型	string	—	'.xls, .xlsx '

其他可参考 jp-dialog，和 jp-upload 支持的参数。

Events

事件名称	说明	回调参数
onSure	点击确认按钮触发	-

Methods

方法名	说明	参数
show	展示 dialog	-
hide	隐藏 dialog	—

slot

slot 名称	说明
default	-
footer	底部 slot