{"id":18,"date":"2025-06-19T15:24:50","date_gmt":"2025-06-19T07:24:50","guid":{"rendered":"https:\/\/kzqgy.cn\/?p=18"},"modified":"2025-07-03T10:46:02","modified_gmt":"2025-07-03T02:46:02","slug":"vxe-table%e5%b0%81%e8%a3%85vue%e7%bb%84%e4%bb%b6%ef%bc%88%e5%bc%80%e7%ae%b1%e5%8d%b3%e7%94%a8%ef%bc%89-%e7%81%b5%e6%b4%bb%e5%ba%a6%e6%9b%b4%e9%ab%98%ef%bc%8c%e9%80%82%e5%90%88%e4%ba%a7%e5%93%81","status":"publish","type":"post","link":"https:\/\/kzqgy.cn\/index.php\/2025\/06\/19\/vxe-table%e5%b0%81%e8%a3%85vue%e7%bb%84%e4%bb%b6%ef%bc%88%e5%bc%80%e7%ae%b1%e5%8d%b3%e7%94%a8%ef%bc%89-%e7%81%b5%e6%b4%bb%e5%ba%a6%e6%9b%b4%e9%ab%98%ef%bc%8c%e9%80%82%e5%90%88%e4%ba%a7%e5%93%81\/","title":{"rendered":"vxe-table\u5c01\u88c5vue\u7ec4\u4ef6\uff08\u5f00\u7bb1\u5373\u7528\uff09-\u7075\u6d3b\u5ea6\u66f4\u9ad8\uff0c\u9002\u5408\u4ea7\u54c1\u8fc7\u4e8e\u5b9a\u5236\u5316"},"content":{"rendered":"
\n
<template><\/div>\n
\u00a0 <div class=”table-box”><\/div>\n
\u00a0 \u00a0 <div><\/div>\n
\u00a0 \u00a0 \u00a0 <div style=”padding: 0 15px” v-if=”!showAnimate”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <vxe-form ref=”formRef”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <slot name=”form-items”><\/slot><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-form-item><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-button-group><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-button type=”submit” status=”primary” @click=”search”>\u67e5\u8be2<\/vxe-button><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-button type=”reset” @click=”reset”>\u91cd\u7f6e<\/vxe-button><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/vxe-button-group><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/vxe-form-item><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/vxe-form><\/div>\n
\u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 <div class=”table-container”><\/div>\n
\u00a0 \u00a0 \u00a0 <div class=”flex flx-j-between” style=”margin-bottom: 10px”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <slot name=”header-button-le” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <slot name=”header-button-ri” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <slot name=”toolButton”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <el-tooltip :content=”showAnimate ? ‘\u5c55\u5f00’ : ‘\u6536\u8d77'” placement=”top”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <el-button :icon=”Filter” @click=”showSearch” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/el-tooltip><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <el-tooltip :content=”‘\u5237\u65b0'” placement=”top”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <el-button :icon=”Refresh” @click=”search” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/el-tooltip><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <el-tooltip :content=”‘\u5217\u8bbe\u7f6e'” placement=”top”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <el-button :icon=”Operation” @click=”openColSetting” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/el-tooltip><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <el-button :icon=”Download” @click=”exportEvent” v-show=”DownloadBarShow” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/slot><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 <div class=”table-wrapper”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <vxe-table<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ref=”tableRef”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :id=”id”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :data=”tableData”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :border=”border”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 v-bind=”tableProps”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height=”89%”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @checkbox-all=”selectChange”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @checkbox-change=”selectChange”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @radio-change=”radioChange”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :show-footer=”showFooter”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :show-header-overflow=”showHeaderOverflow”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :show-footer-overflow=”showFooterOverflow”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :footer-data=”footerData”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :row-config=”{<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 useKey: true,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 keyField: Key,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isHover: true,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isCurrent: true,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resizable: true,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :column-config=”{ useKey: true, resizable: true }”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :custom-config=”customConfig”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :tooltip-config=”tooltipConfig”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :export-config=”downLoadType”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :scroll-y=”virtualConfig.y”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :scroll-x=”virtualConfig.x”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-column type=”radio” width=”60″ v-if=”radio” :fixed=”‘left'”><\/vxe-column><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-column type=”checkbox” width=”60″ v-if=”checkbox” :fixed=”‘left'”><\/vxe-column><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-column type=”expand” width=”60″ v-if=”expand”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <template #content=”{ row }”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <slot name=”expand” :row=”row”><\/slot><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/template><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/vxe-column><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-column type=”seq” width=”70″ v-if=”seq” :fixed=”‘left'”><\/vxe-column><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <template v-for=”item in colSetting” :key=”item[Key]”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-column<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 v-bind=”item”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :align=”item.align ?? ‘left'”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :show-overflow=”item.showOverflow ?? true”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :show-header-overflow=”item.showHeaderOverflow ?? false”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :show-footer-overflow=”item.showFooterOverflow ?? false”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :title-prefix=”item[‘title-prefix’]”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :title-suffix=”item[‘title-suffix’]”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 row-resize<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <template #header=”scope”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <slot v-if=”item.header” :scope=”scope” :name=”item.header” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span v-else>{{ scope.column.title }}<\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/template><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <template #default=”scope”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <slot v-if=”item.slot” :scope=”scope” :name=”item.slot” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div v-else><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {{ formatData(scope.row, item.field) }}<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/template><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/vxe-column><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/template><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <!– \u7a7a\u6570\u636e\u65f6\u663e\u793a\u56fe\u7247 –><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <template #empty><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=”emptyStyle”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 src=”@\/assets\/images\/notData.png”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 style=”width: 200px; opacity: 0.6″<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 alt=”\u6682\u65e0\u6570\u636e”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div style=”margin-top: 10px; color: #909399″>\u6682\u65e0\u6570\u636e<\/div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/template><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/vxe-table><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <vxe-pager<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 style=”padding-right: 10px”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 v-model:current-page=”current”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 v-model:page-size=”size”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :page-size=”size”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :total=”total”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :layouts=”[‘Total’, ‘Sizes’, ‘PrevPage’, ‘Number’, ‘NextPage’, ‘Jump’, ‘PageCount’]”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :page-sizes=”pageSizes”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @page-change=”handlePageChange”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <template #pageCount=”{ pageCount }”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>\u5171{{ pageCount }}\u9875<\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/template><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/vxe-pager><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 <\/div><\/div>\n
\u00a0 <\/div><\/div>\n
<\/template><\/div>\n
<script setup lang=”js”><\/div>\n
import { onMounted, ref, computed, reactive \u00a0 } from ‘vue’;<\/div>\n
import { ElLoading, ElMessage } from ‘element-plus’;<\/div>\n
import { Filter, Operation, Refresh, Download } from ‘@element-plus\/icons-vue’;<\/div>\n
import { cloneDeep } from ‘lodash-es’;<\/div>\n
const props = defineProps({<\/div>\n
\u00a0 \/\/ \u8868\u683cid<\/div>\n
\u00a0 id: {<\/div>\n
\u00a0 \u00a0 type: String,<\/div>\n
\u00a0 \u00a0 required: true,<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u67e5\u8be2\u53c2\u6570\u5bf9\u8c61<\/div>\n
\u00a0 searchParams: {<\/div>\n
\u00a0 \u00a0 type: Object,<\/div>\n
\u00a0 \u00a0 default: () => ({})<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u67e5\u8be2\u53c2\u6570\u5bf9\u8c61\u81ea\u5b9a\u4e49<\/div>\n
\u00a0 apiParams: {<\/div>\n
\u00a0 \u00a0 type: Object,<\/div>\n
\u00a0 \u00a0 default: () => ({})<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u662f\u5426\u663e\u793a\u5e8f\u53f7\u5217<\/div>\n
\u00a0 seq: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: false<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u662f\u5426\u663e\u793a\u5355\u9009\u5217<\/div>\n
\u00a0 radio: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: false<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u662f\u5426\u663e\u793a\u591a\u9009\u5217<\/div>\n
\u00a0 checkbox: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: true<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u662f\u5426\u663e\u793a\u5c55\u5f00\u884c<\/div>\n
\u00a0 expand: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: false<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u662f\u5426\u663e\u793a\u8868\u683c\u8fb9\u6846<\/div>\n
\u00a0 border: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: false<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u83b7\u53d6\u6570\u636e\u7684API\u51fd\u6570<\/div>\n
\u00a0 apiName: {<\/div>\n
\u00a0 \u00a0 type: Function,<\/div>\n
\u00a0 \u00a0 required: true,<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u8868\u683c\u884c\u7684\u552f\u4e00\u6807\u8bc6\u5b57\u6bb5\u540d<\/div>\n
\u00a0 Key: {<\/div>\n
\u00a0 \u00a0 type: String,<\/div>\n
\u00a0 \u00a0 default: ‘id’<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u5bfc\u51fa\u6587\u4ef6\u7c7b\u578b<\/div>\n
\u00a0 downLoadType: {<\/div>\n
\u00a0 \u00a0 type: [String, Object],<\/div>\n
\u00a0 \u00a0 default: () => ({ type: ‘xlsx’ })<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u662f\u5426\u663e\u793a\u5bfc\u51fa\u6309\u94ae<\/div>\n
\u00a0 DownloadBarShow: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: false<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u662f\u5426\u663e\u793a\u8868\u5c3e<\/div>\n
\u00a0 showFooter: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: false<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u8868\u5c3e\u5185\u5bb9\u662f\u5426\u6ea2\u51fa\u663e\u793a<\/div>\n
\u00a0 showFooterOverflow: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: true<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u8868\u5934\u5185\u5bb9\u662f\u5426\u6ea2\u51fa\u663e\u793a<\/div>\n
\u00a0 showHeaderOverflow: {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: true<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u8868\u5c3e\u6570\u636e<\/div>\n
\u00a0 footerData: {<\/div>\n
\u00a0 \u00a0 type: Array,<\/div>\n
\u00a0 \u00a0 default: () => ([])<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u63d0\u793a\u914d\u7f6e<\/div>\n
\u00a0 tooltipConfig: {<\/div>\n
\u00a0 \u00a0 type: Object,<\/div>\n
\u00a0 \u00a0 default: () => ({})<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u5217\u914d\u7f6e<\/div>\n
\u00a0 columns: Array,<\/div>\n
\u00a0 \/\/ \u8868\u683c\u5c5e\u6027\u914d\u7f6e<\/div>\n
\u00a0 tableProps: Object,<\/div>\n
\u00a0 \/\/ \u5206\u9875\u5927\u5c0f\u9009\u9879<\/div>\n
\u00a0 pageSizes: {<\/div>\n
\u00a0 \u00a0 type: Array,<\/div>\n
\u00a0 \u00a0 default: () => [10, 20, 30, 50, 100]<\/div>\n
\u00a0 },<\/div>\n
\u00a0 \/\/ \u865a\u62df\u6eda\u52a8\u662f\u5426\u5f00\u542f<\/div>\n
\u00a0 enabled : {<\/div>\n
\u00a0 \u00a0 type: Boolean,<\/div>\n
\u00a0 \u00a0 default: true<\/div>\n
\u00a0 }<\/div>\n
});<\/div>\n
const emits = defineEmits([‘reset’,’error’]);<\/div>\n
const loading = ref(false)<\/div>\n
const colSetting = ref(props.columns);<\/div>\n
const tableRef = ref();<\/div>\n
const formRef = ref(null);<\/div>\n
const showAnimate = ref(true);<\/div>\n
const current = ref(1);<\/div>\n
const size = ref(10);<\/div>\n
const total = ref(0);<\/div>\n
const tableData = ref([]);<\/div>\n
\/\/ \u52a8\u6001\u865a\u62df\u6eda\u52a8\u914d\u7f6e<\/div>\n
const virtualConfig = computed(() => ({<\/div>\n
\u00a0 y: {<\/div>\n
\u00a0 \u00a0 enabled: \u00a0props.enabled,<\/div>\n
\u00a0 \u00a0 gt: 80,<\/div>\n
\u00a0 \u00a0 scrollY: {<\/div>\n
\u00a0 \u00a0 \u00a0 mode: ‘wheel’ \/\/ \u63a8\u8350\u914d\u7f6e\uff1a\u6eda\u8f6e\u6a21\u5f0f\u66f4\u6d41\u7545<\/div>\n
\u00a0 \u00a0 }<\/div>\n
\u00a0 },<\/div>\n
\u00a0 x: {<\/div>\n
\u00a0 \u00a0 enabled: tableData.value.some(row => {<\/div>\n
\u00a0 \u00a0 \u00a0 try {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 return (Object.keys(row).length > 8 || JSON.stringify(row).length > 300 )&& props.enabled<\/div>\n
\u00a0 \u00a0 \u00a0 } catch {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 return false<\/div>\n
\u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 }),<\/div>\n
\u00a0 \u00a0 gt: 5,<\/div>\n
\u00a0 \u00a0 scrollX: {<\/div>\n
\u00a0 \u00a0 \u00a0 mode: ‘wheel’<\/div>\n
\u00a0 \u00a0 }<\/div>\n
\u00a0 }<\/div>\n
}))<\/div>\n
\/\/ \u5176\u4f59\u65b9\u6cd5\u4fdd\u6301\u4e0d\u53d8<\/div>\n
const formatData = (row, field) => {<\/div>\n
\u00a0 return field && row[field] !== undefined ? row[field] : ‘-‘;<\/div>\n
};<\/div>\n
const selectIdLists = ref([]);<\/div>\n
const selectLists = ref([]);<\/div>\n
const selectChange = () => {<\/div>\n
\u00a0 const records = tableRef.value?.getCheckboxRecords() || [];<\/div>\n
\u00a0 selectLists.value = records;<\/div>\n
\u00a0 selectIdLists.value = records.map((i) => { return i[props.Key] });<\/div>\n
};<\/div>\n
const selectList = ref([]);<\/div>\n
const radioChange = ({ row }) => {<\/div>\n
\u00a0 selectList.value = row;<\/div>\n
};<\/div>\n
const showSearch = () => {<\/div>\n
\u00a0 showAnimate.value = !showAnimate.value;<\/div>\n
\u00a0 \/\/ formRef.value.toggleCollapse();<\/div>\n
};<\/div>\n
const model = ref({})<\/div>\n
const search = () => {<\/div>\n
\u00a0 getTableData();<\/div>\n
};<\/div>\n
const reset = () => {<\/div>\n
\u00a0 emits(‘reset’);<\/div>\n
\u00a0 current.value = 1<\/div>\n
\u00a0 tableRef.value.clearCheckboxRow();<\/div>\n
\u00a0 tableRef.value.clearRadioRow();<\/div>\n
\u00a0 selectLists.value = [];<\/div>\n
\u00a0 selectIdLists.value = [];<\/div>\n
\u00a0 selectList.value = [];<\/div>\n
\u00a0 setTimeout(() => {<\/div>\n
\u00a0 \u00a0 getTableData();<\/div>\n
\u00a0 \u00a0 console.log(‘model.value’, model.value);<\/div>\n
\u00a0 }, 0);<\/div>\n
};<\/div>\n
const getTableData = () => {<\/div>\n
\u00a0 \/\/ const loadingInstance = ElLoading.service({<\/div>\n
\u00a0 \/\/ \u00a0 text: ‘\u52a0\u8f7d\u4e2d…’<\/div>\n
\u00a0 \/\/ })<\/div>\n
\u00a0 model.value = cloneDeep(props.searchParams)<\/div>\n
\u00a0 const apiParams = cloneDeep(props.apiParams)<\/div>\n
\u00a0 const query = {<\/div>\n
\u00a0 \u00a0 …model.value,<\/div>\n
\u00a0 \u00a0 …apiParams,<\/div>\n
\u00a0 \u00a0 current: current.value,<\/div>\n
\u00a0 \u00a0 size: size.value<\/div>\n
\u00a0 }<\/div>\n
\u00a0 if (!props.apiName) return;<\/div>\n
\u00a0 props.apiName(current.value,size.value,Object.assign({},query))<\/div>\n
\u00a0 \u00a0 .then(({ data:res }) => {<\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ loadingInstance.close()<\/div>\n
\u00a0 \u00a0 \u00a0 tableData.value = res.data.records || []<\/div>\n
\u00a0 \u00a0 \u00a0 total.value = res.data.total || 0<\/div>\n
\u00a0 \u00a0 })<\/div>\n
\u00a0 \u00a0 .catch((err) => {<\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ loadingInstance.close()<\/div>\n
\u00a0 \u00a0 \u00a0 emits(‘error’, err)<\/div>\n
\u00a0 \u00a0 })<\/div>\n
}<\/div>\n
const handleSizeChange = (val) => {<\/div>\n
\u00a0 size.value = val;<\/div>\n
};<\/div>\n
const handleCurrentChange = (val) => {<\/div>\n
\u00a0 current.value = val;<\/div>\n
};<\/div>\n
const handlePageChange = ({ currentPage, pageSize }) => {<\/div>\n
\u00a0 handleSizeChange(pageSize)<\/div>\n
\u00a0 handleCurrentChange(currentPage)<\/div>\n
\u00a0 getTableData();<\/div>\n
}<\/div>\n
onMounted(() => {<\/div>\n
\u00a0 getTableData();<\/div>\n
});<\/div>\n
const findCustomSetting = (id) => {<\/div>\n
\u00a0 return new Promise(resolve => {<\/div>\n
\u00a0 \u00a0 setTimeout(() => {<\/div>\n
\u00a0 \u00a0 \u00a0 try {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (sessionStorage.getItem(id)) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resolve(JSON.parse(sessionStorage.getItem(id) || ”))<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ ElMessage.success(‘\u5f02\u6b65\u8fd8\u539f\u7528\u6237\u4e2a\u6027\u5316\u6570\u636e\u6210\u529f’)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 } else {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resolve({})<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 } catch (e) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 resolve({})<\/div>\n
\u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 }, 300)<\/div>\n
\u00a0 })<\/div>\n
}<\/div>\n
const saveCustomSetting = (id, storeData) => {<\/div>\n
\u00a0 return new Promise(resolve => {<\/div>\n
\u00a0 \u00a0 setTimeout(() => {<\/div>\n
\u00a0 \u00a0 \u00a0 sessionStorage.setItem(id, JSON.stringify(storeData))<\/div>\n
\u00a0 \u00a0 \u00a0 ElMessage.success(‘\u4fdd\u5b58\u7528\u6237\u4e2a\u6027\u5316\u6570\u636e\u6210\u529f’)<\/div>\n
\u00a0 \u00a0 \u00a0 resolve()<\/div>\n
\u00a0 \u00a0 }, 200)<\/div>\n
\u00a0 })<\/div>\n
}<\/div>\n
const customConfig = reactive({<\/div>\n
\u00a0 storage: true,<\/div>\n
\u00a0 restoreStore ({ id }) {<\/div>\n
\u00a0 \u00a0 return findCustomSetting(id)<\/div>\n
\u00a0 },<\/div>\n
\u00a0 updateStore ({ id, storeData }) {<\/div>\n
\u00a0 \u00a0 return saveCustomSetting(id, storeData)<\/div>\n
\u00a0 }<\/div>\n
})<\/div>\n
const openColSetting = () => {<\/div>\n
\u00a0 tableRef.value.openCustom();<\/div>\n
};<\/div>\n
const exportEvent = () => {<\/div>\n
\u00a0 tableRef.value.openExport();<\/div>\n
};<\/div>\n
defineExpose({<\/div>\n
\u00a0 getTableData,<\/div>\n
\u00a0 tableRef,<\/div>\n
\u00a0 selectLists,<\/div>\n
\u00a0 selectIdLists,<\/div>\n
\u00a0 selectList<\/div>\n
});<\/div>\n
<\/script><\/div>\n
<style scoped lang=”scss”><\/div>\n
@import ‘.\/style.scss’;<\/div>\n
<\/style><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

<template> \u00a0 <div class=”… Read morevxe-table\u5c01\u88c5vue\u7ec4\u4ef6\uff08\u5f00\u7bb1\u5373\u7528\uff09-\u7075\u6d3b\u5ea6\u66f4\u9ad8\uff0c\u9002\u5408\u4ea7\u54c1\u8fc7\u4e8e\u5b9a\u5236\u5316<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[3,4],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-all","tag-vxe-table","tag-4","content-layout-excerpt-thumb"],"_links":{"self":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":3,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}