红色红色方块内是要实现的功能
HTML代码(均为element标签)
<div class="done" @click="download">
<a >下载导入模板</a>
</div>
<div class="leading-out">
<el-button type="info" @click="exportBtn">
<div class="svg"></div>
<span>导出</span>
</el-button>
</div>
<div class="leading-in">
<!-- 导入员工信息 -->
<el-upload
class="upload-demo"
with-credentials: true
action="http://csn.matrixair.cn/RBus/importStaff"//后端给的导入表格地址
:on-progress="progress"
:on-success="importStaff"
:limit="3"
:file-list="fileList"
:show-file-list="false"
accept=".xlsx, .xls"
with-credentials
>
<el-button type="info" plain class="import">
<span class="text">导入乘客</span>
</el-button>
</el-upload>
</div>
data中定义数组
fileList: [] ,// 上传文件列表
staffIds: [],
methods中写入
// 上传文件的钩子
progress(event, file, fileList) {
if (event.isTrusted === true) {
} else {
this.$message({
message: "上传失败,请重新上传!",
type: "error",
offset: 100,
customClass: "message-index",
});
}
},
// 下载导入模板
download() {
window.location.href =//后端给的导入表格地址
"http://csn.matrixair.cn/file/sbus/excel/员工信息模板.xls";
},
// 导入成功
importStaff(response, file, fileList) {
if (response.code === 0) {
var text = "";
this.$confirm(
`上传成功!`,
"提示",
{
showCancelButton: false,
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {})
.catch(() => {});
this.getstaffList();
} else {
this.$confirm('【上传失败】', "提示", {
confirmButtonText: "下载",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
window.location.href = response.exceUploadUrl;
})
.catch(() => {});
}
// 清空上传列表
this.fileList = [];
},
// 导出
exportBtn() {
if (this.tables.length === 0 && this.staffIds.length === 0) {//判断列表是否为空
this.$message.closeAll();
this.$message({
message: "没有数据可供导出!",
type: "warning",
offset: 100,
customClass: "message-index",
});
} else {
var device;
if (this.staffIds.length > 0) {
device = this.staffIds.join(",");
} else {
device = this.tables.map((ele) => {
return ele.staffId;//接口表格id值
});
}
var data = {
staffIds: device,
};
exporApi.exportExcel(data, "staffRecordExcel");//导出表格接口
}
},
我的表格el-table 属性
<el-table
ref="multipleTable"
:data="pageData"
style="width: 100%"
:row-style="{ height: '40px' }"
:cell-style="{ padding: '0px' }"
:header-row-style="{ height: '40px' }"
:header-cell-style="{ padding: '5px' }"
:height="tableHeight"
v-loading="tableLoading"
@selection-change="handleSelectionChange"
@select-all="selectAll"
:row-key="(row)=>{ return row.uid}"
highlight-current-row
element-loading-background="#001021"
>