This commit is contained in:
@@ -92,6 +92,7 @@
|
|||||||
<n-col :span="24">
|
<n-col :span="24">
|
||||||
<div mt-10>
|
<div mt-10>
|
||||||
<n-button type="primary" @click="getList">搜索</n-button>
|
<n-button type="primary" @click="getList">搜索</n-button>
|
||||||
|
<n-button type="primary" ml-10 @click="exportTable">导出表格</n-button>
|
||||||
<n-button ml-10 @click="clear">重置</n-button>
|
<n-button ml-10 @click="clear">重置</n-button>
|
||||||
</div>
|
</div>
|
||||||
</n-col>
|
</n-col>
|
||||||
@@ -110,6 +111,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import * as XLSX from 'xlsx'
|
||||||
import api from './api'
|
import api from './api'
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
@@ -307,6 +309,8 @@ const pagination = ref({
|
|||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
itemCount: 0,
|
itemCount: 0,
|
||||||
|
showSizePicker: true,
|
||||||
|
pageSizes: [10, 20, 50, 100],
|
||||||
onChange: (page) => {
|
onChange: (page) => {
|
||||||
pagination.value.page = page
|
pagination.value.page = page
|
||||||
getList()
|
getList()
|
||||||
@@ -322,6 +326,16 @@ onMounted(() => {
|
|||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const exportTable = () => {
|
||||||
|
// 将数据转换为工作簿
|
||||||
|
const worksheet = XLSX.utils.json_to_sheet(data.value)
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
||||||
|
|
||||||
|
// 生成Excel文件并触发下载
|
||||||
|
XLSX.writeFile(workbook, 'table.xlsx')
|
||||||
|
}
|
||||||
|
|
||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -71,11 +71,13 @@
|
|||||||
<n-col :span="24">
|
<n-col :span="24">
|
||||||
<div mt-10>
|
<div mt-10>
|
||||||
<n-button type="primary" @click="getList">搜索</n-button>
|
<n-button type="primary" @click="getList">搜索</n-button>
|
||||||
|
<n-button type="primary" ml-10 @click="exportTable">导出表格</n-button>
|
||||||
<n-button ml-10 @click="clear">重置</n-button>
|
<n-button ml-10 @click="clear">重置</n-button>
|
||||||
</div>
|
</div>
|
||||||
</n-col>
|
</n-col>
|
||||||
</n-row>
|
</n-row>
|
||||||
<n-data-table
|
<n-data-table
|
||||||
|
ref="tableRef"
|
||||||
class="mt-5"
|
class="mt-5"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
@@ -90,6 +92,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import api from './api'
|
import api from './api'
|
||||||
|
import * as XLSX from 'xlsx'
|
||||||
import { NEllipsis, NButton, NPopconfirm } from 'naive-ui'
|
import { NEllipsis, NButton, NPopconfirm } from 'naive-ui'
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
@@ -282,6 +285,8 @@ const pagination = ref({
|
|||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
itemCount: 0,
|
itemCount: 0,
|
||||||
|
showSizePicker: true,
|
||||||
|
pageSizes: [10, 20, 50, 100],
|
||||||
onChange: (page) => {
|
onChange: (page) => {
|
||||||
pagination.value.page = page
|
pagination.value.page = page
|
||||||
getList()
|
getList()
|
||||||
@@ -351,6 +356,17 @@ const clear = () => {
|
|||||||
}
|
}
|
||||||
getList()
|
getList()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const tableRef = ref()
|
||||||
|
const exportTable = () => {
|
||||||
|
// 将数据转换为工作簿
|
||||||
|
const worksheet = XLSX.utils.json_to_sheet(data.value)
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
||||||
|
|
||||||
|
// 生成Excel文件并触发下载
|
||||||
|
XLSX.writeFile(workbook, 'table.xlsx')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -358,6 +374,7 @@ const clear = () => {
|
|||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-statistic-value__content) {
|
:deep(.n-statistic-value__content) {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
Reference in New Issue
Block a user