<template> <div> <el-dialog v-if="visible" v-dialogDrag :visible="visible" :modal-append-to-body="false" :close-on-click-modal="false" title="新增" destroy-on-close width="50%"> <div> <el-upload action="/webapi/gjzf/fxdsdb/upload" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :limit="1" :show-file-list="false" accept=".xml"> <c-button slot="trigger" size="small" type="primary">导入</c-button> </el-upload> <el-table :data="stmData.data" :columns="stmData.columns" v-loading="load" style="width: 100%;margin-top: 10px;" size="small" :border="true" :highlight-current-row="true"> <el-table-column v-for="(item, key) in stmData.columns" :key="key" :label="item.label" :prop="item.prop" :min-width="item.width"> </el-table-column> </el-table> </div> <span slot="footer" class="dialog-footer"> <el-button v-if="isDispaly" type="primary" @click="handleSubmit()">确 定</el-button> <el-button @click="handleCancel()">取 消</el-button> </span> </el-dialog> </div> </template> <script> export default { mixins: [], props: { }, computed: { }, data() { return { visible: false, isDispaly: false, load: false, stmData: { columns: [ { label: "导入日期", prop: "credat", width: "120px" }, ], data: [] } }; }, watch: { }, methods: { // 上传前校检大小 handleBeforeUpload(file) { // 校检文件大小 const isLt = file.size / 1024 / 1024 < 100; if (!isLt) { this.$notify.error(`上传文件大小不能超过 100 MB!`); return false; } this.load = true; return true; }, handleSuccess(res, file) { console.log('=====', res) this.load = false; this.isDispaly = true; }, handleSubmit() { this.visible = false; }, handleCancel() { this.visible = false; } } }; </script> <style scoped lang="less"></style>