Excel导入组件的封装以及使用页面点击弹出该弹框

封装的组件

html 复制代码
<template>
  <el-dialog
    width="500px"
    title="员工导入"
    :visible="showExcelDialog"
    @close="$emit('update:showExcelDialog', false)"
  >
    <el-row type="flex" justify="center">
      <div class="upload-excel">
        <input
          ref="excel-upload-input"
          class="excel-upload-input"
          type="file"
          accept=".xlsx, .xls"
        >
        <div class="drop">
          <i class="el-icon-upload" />
          <el-button type="text">下载导入模板</el-button>
          <span>将文件拖到此处或
            <el-button type="text">点击上传</el-button>
          </span>
        </div>
      </div>
    </el-row>
    <el-row type="flex" justify="end">
      <!-- update:props属性名,值 直接修改 .sync修饰符的属性值 -->
      <el-button size="mini" type="primary" @click="$emit('update:showExcelDialog', false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>
<script>

export default {
  props: {
    showExcelDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
    .upload-excel {
      display: flex;
      justify-content: center;
      margin: 20px;
      width: 360px;
      height: 180px;
      align-items: center;
      color: #697086;
      .excel-upload-input {
        display: none;
        z-index: -9999;
      }
      .btn-upload,
      .drop {
        border: 1px dashed #dcdfe6;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 160px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .drop {
        line-height: 40px;
        color: #bbb;
        i {
          font-size: 60px;
          display: block;
          color: #c0c4cc;
        }
      }
    }
</style>


在需要使用弹框页面

html

html 复制代码
 <el-button size="mini" @click="showExcelDialog = true">excel导入</el-button>
 <import-excel :show-excel-dialog.sync="showExcelDialog" />

css

javascript 复制代码
import ImportExcel from './components/import-excel.vue'
export default {
  components: {
    ImportExcel
  },
	data () {
	 return  {
	     showExcelDialog: false // 控制excel的弹层显示和隐藏
	 }
   }
 }
相关推荐
Python大数据分析@2 分钟前
如何用 Python xlwings库自动化操作 Excel?
python·自动化·excel
老师可可1 小时前
成绩查询系统如何制作?
经验分享·学习·小程序·excel·学习方法
yanweijie03171 小时前
Excel(WPS表格)中多列去重就用Tocol+Unique组合函数
excel·wps
Jackiejin52613 小时前
WPS表格选择性粘贴快捷键怎么使用?WPS如何给表格某一行都加上指定数字?
数据分析·excel·wps
办公解码器14 小时前
Excel怎么将八位数字设置为日期格式?
excel
gis914 小时前
批量地址解析坐标,支持WPS、EXCEL软件,支持导出SHP、GEOJSON、DXF等文件格式
excel·wps
赵庆明老师15 小时前
ASP.NET Core读取Excel文件
excel
luyun02020218 小时前
流批了,pdf批量转excel
windows·pdf·excel·figma
老师可可18 小时前
成绩发布工具使用方法,附成绩分析教程
学习·信息可视化·小程序·excel·学习方法
SamDeepThinking1 天前
处理大型excel文件的技术选型
excel