添加表格导出功能
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 异常事件 -->
|
||||
<TableHeader datePicker ref="refheader">
|
||||
<TableHeader datePicker ref="refheader" showExport>
|
||||
<!-- <template v-slot:select>
|
||||
<el-form-item label="数据来源">
|
||||
<el-cascader
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<TableHeader datePicker ref="refheader">
|
||||
<TableHeader datePicker ref="refheader" showExport>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="数据来源">
|
||||
<el-cascader v-model.trim="tableStore.table.params.cascader" placeholder="请选择数据来源"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<TableHeader datePicker ref="refheader">
|
||||
<TableHeader datePicker ref="refheader" showExport>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="数据来源">
|
||||
<el-cascader v-model.trim="tableStore.table.params.cascader" placeholder="请选择数据来源"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div ref="refheader" v-if="!isWaveCharts">
|
||||
<TableHeader datePicker>
|
||||
<TableHeader datePicker showExport>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="数据来源">
|
||||
<el-cascader placeholder="请选择数据来源" @change="sourceChange"
|
||||
|
||||
@@ -223,9 +223,7 @@
|
||||
{{ child.anotherName }}:
|
||||
{{ child.dataValue === 3.1415926 ? '暂无数据' : child.dataValue }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.children.length" class="box-card-div">
|
||||
<div style="display: flex; align-items: center">
|
||||
|
||||
@@ -47,21 +47,30 @@
|
||||
{{ deviceData.appCheck }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-tabs v-model.trim="dataSet" type="border-card" class="device-manage-box-card" @tab-click="handleClick">
|
||||
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
|
||||
:key="index"></el-tab-pane>
|
||||
<div :style="{ height: tableHeight }" v-loading="tableLoading">
|
||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||
<vxe-column type="seq" title="序号" width="80"></vxe-column>
|
||||
<vxe-column field="name" title="数据名称"></vxe-column>
|
||||
<vxe-column field="phasic" title="相别"></vxe-column>
|
||||
<vxe-column field="type" title="数据类型"></vxe-column>
|
||||
<vxe-column field="unit" title="单位"></vxe-column>
|
||||
<vxe-column field="startTimes" title="开始次数"></vxe-column>
|
||||
<vxe-column field="endTimes" title="结束次数"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-tabs>
|
||||
<div style="position: relative">
|
||||
|
||||
|
||||
<el-tabs v-model.trim="dataSet" type="border-card" class="device-manage-box-card"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
|
||||
:key="index"></el-tab-pane>
|
||||
<div :style="{ height: tableHeight }" v-loading="tableLoading">
|
||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" ref="xTableRef"
|
||||
style="width: 100%">
|
||||
<vxe-column type="seq" title="序号" width="80"></vxe-column>
|
||||
<vxe-column field="name" title="数据名称"></vxe-column>
|
||||
<vxe-column field="phasic" title="相别"></vxe-column>
|
||||
<vxe-column field="type" title="数据类型"></vxe-column>
|
||||
<vxe-column field="unit" title="单位"></vxe-column>
|
||||
<vxe-column field="startTimes" title="开始次数"></vxe-column>
|
||||
<vxe-column field="endTimes" title="结束次数"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
</div>
|
||||
|
||||
</el-tabs>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportData" class="export-btn">导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="请选择设备" class="device-manage-right" />
|
||||
<MangePopup ref="mangePopup" />
|
||||
@@ -103,6 +112,7 @@ const tableData = ref([])
|
||||
const tableHeight = mainHeight(260).height
|
||||
const mangePopup = ref()
|
||||
const activeName = ref(0)
|
||||
const xTableRef = ref()
|
||||
//治理设备和便携式设备切换判断
|
||||
const deviceType = ref('0')
|
||||
const deviceTypeChange = (val: any, obj: any) => {
|
||||
@@ -250,6 +260,21 @@ const handleRestartDevice = () => {
|
||||
deviceRestartLoading.value = false
|
||||
})
|
||||
}
|
||||
const exportData = () => {
|
||||
|
||||
|
||||
xTableRef.value.exportData({
|
||||
filename: deviceData.value.dataSetList.filter((item: any) => item.id == dataSet.value)[0]?.name, // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
download: false,
|
||||
data: tableData.value, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column, $columnIndex) {
|
||||
return !(column.$columnIndex === 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -279,4 +304,11 @@ const handleRestartDevice = () => {
|
||||
-webkit-text-security: disc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user