html
<el-dialog
title="文件导入"
:visible.sync="isShowImport"
width="30%"
top="30vh"
center
:show-close="false"
>
<div slot="footer" class="dialog-footer">
<div class="choose-template">
<div>
<span>文件选择:</span>
<el-input v-model="input1" readonly>
<div slot="append" @click="openFile">
<i class="el-input__icon el-icon-more"></i>
</div>
</el-input>
<input
type="file"
id="upload-input"
accept=".xlsx"
style="display: none;"
@change="uploadChange"
/>
</div>
<div class="download-template">模板下载</div>
</div>
<div style="margin-top: 25px;">
<el-button type="primary" @click="isShowImport = false"
>确 定</el-button
>
<el-button @click="isShowImport = false">取 消</el-button>
</div>
</div>
</el-dialog>
js
data() {
return {
isShowImport: true,
input1: ''
}
},
methods: {
openFile() {
let input = document.getElementById("upload-input");
input.click();
},
uploadChange(a) {
let input = document.getElementById("upload-input");
this.input1 = input.files[0].name;
}
}
less
<style lang="less" scoped>
.choose-template {
font-size: 18px;
display: flex;
justify-content: space-around;
.download-template {
color: #00cccc;
line-height: 40px;
text-decoration: underline;
cursor: pointer;
}
}
</style>
<style lang="less">
.el-dialog__header {
text-align: left;
background-color: #00cccc;
font-weight: bold;
padding: 10px;
}
.el-dialog__body {
padding: 0;
}
.el-dialog__footer {
padding-top: 30px;
}
.el-input {
width: 70%;
}
.choose-template {
.el-input__icon {
line-height: 38px;
width: 40px;
}
.el-input-group__append {
cursor: pointer;
padding: 0;
}
}
.el-button--primary {
background-color: #00cccc;
border-color: #00cccc;
}
</style>
显示效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200715135009548.jpg#pic_center)