sh-view 2.8.12 → 2.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.8.12",
+  "version": "2.8.15",
   "description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
   "main": "packages/index.js",
   "typings": "types/index.d.ts",
@@ -37,9 +37,10 @@
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",
     "vue-router": "^4.2.4",
-    "vxe-table": "^4.5.20",
+    "vxe-table": "^4.5.21",
     "vxe-table-plugin-export-pdf": "^4.0.1",
     "vxe-table-plugin-export-xlsx": "^4.0.1",
+    "vxe-table-plugin-menus": "^4.0.0",
     "xe-clipboard": "^1.10.2"
   },
   "devDependencies": {

package/packages/components/sh-calendar/index.vue

@@ -568,7 +568,7 @@ export default defineComponent({
 				padding-top: 0;
 			}
 			&.is-month {
-				padding: 20px 5px;
+				padding: 10px 5px;
 			}
 		}
 		&-body {

package/packages/components/sh-date/index.vue

@@ -109,7 +109,7 @@ export default defineComponent({
 
 		const pulldownValue = ref(false)
 		const inputValue = ref(props.modelValue)
-		const rangeValue = ref(props.modelValue || [])
+		const rangeValue = ref(Array.isArray(props.modelValue) ? props.modelValue : [])
 
 		const inputConfig = computed(() => {
 			let defaultProps = {}
@@ -217,7 +217,7 @@ export default defineComponent({
 		watch(
 			() => props.modelValue,
 			(value, oldValue) => {
-				if (props.range) {
+				if (props.range && Array.isArray(value)) {
 					rangeValue.value = value
 				} else {
 					inputValue.value = value

package/packages/components/sh-table/css/index.scss

@@ -49,23 +49,26 @@
             margin-right: 10px;
         }
     }
-    .sh-table-toolbar-wrap{
-        display: flex;
-        flex: 0 0 auto;
+    .sh-table-toolbar{
+        & > .vxe-toolbar{
+            padding: 0.6em;
+            .vxe-button{
+                & + .vxe-custom--wrapper{
+                    margin-left: 0.8em;
+                }
+            }
+            .vxe-custom--wrapper{
+                margin-left: 0;
+            }
+        }
         .sh-table-toolbar-item{
             display: inline-block;
             vertical-align: baseline;
-            font-size: 14px;
-            margin: 5px;
+            margin: 0 0.8em;
             & + .sh-table-toolbar-item{
                 margin-left: 0;
             }
         }
-        .sh-table-toolbar-left{
-            flex: 1;
-        }
-        .sh-table-toolbar-right{
-        }
     }
     // 关键词搜索高亮样式
     .sh-keyword-lighten{

package/packages/components/sh-table/grid.vue

@@ -1,7 +1,6 @@
 <template>
 	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
 		<vxe-grid
-			:id="id"
 			ref="tableRef"
 			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
@@ -36,38 +35,34 @@
 					</sh-query>
 				</slot>
 			</template>
-			<template #toolbar>
-				<div class="sh-table-toolbar-wrap">
-					<div class="sh-table-toolbar-left">
-						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
-							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
-						</div>
-						<!--ps:全表搜索不支持反转-->
-						<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
-							<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
-							<span v-if="tableFilterData">
-								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
-							</span>
-						</div>
-						<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
-							<slot name="toolbarLeft"></slot>
-						</div>
-					</div>
-					<div class="sh-table-toolbar-right">
-						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
-							<slot name="toolbarRight"></slot>
-						</div>
-						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
-							<div class="sh-table-toolbar-item">
+			<template v-if="isToolbarSlot" #toolbar>
+				<div class="sh-table-toolbar">
+					<vxe-toolbar ref="toolbarRef" v-bind="tableToolbarConfig">
+						<template #buttons>
+							<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
+								<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
+							</div>
+							<!--ps:全表搜索不支持反转-->
+							<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
+								<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
+								<span v-if="tableFilterData">
+									共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
+								</span>
+							</div>
+							<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
+								<slot name="toolbarLeft"></slot>
+							</div>
+						</template>
+						<template #tools>
+							<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
+								<slot name="toolbarRight"></slot>
+							</div>
+							<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
 								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
 							</div>
+							<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 						</template>
-						<div v-if="tableMoneyConfig.enabled" class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
-						<div v-if="tableGlobalConfig.zoom" class="sh-table-toolbar-item">
-							<vxe-button v-if="!tableIsFullscreen" v-ripple :size="size" icon="vxe-icon-zoom-out" @click="handleTableZoomBtn(true)">全屏</vxe-button>
-							<vxe-button v-else v-ripple :size="size" icon="vxe-icon-zoom-in" @click="handleTableZoomBtn(false)">退出全屏</vxe-button>
-						</div>
-					</div>
+					</vxe-toolbar>
 				</div>
 			</template>
 			<template #pagerLeft>
@@ -135,22 +130,8 @@ export default defineComponent({
 
 		const useTableHooks = useTable(props, context, proxy, true)
 
-		const tableIsFullscreen = ref(false) // 表格是否全屏显示状态
-
-		// 表格切换全屏缩放按钮
-		const handleTableZoomBtn = val => {
-			tableIsFullscreen.value = val
-			if (val) {
-				useTableHooks.tableRef.value.zoom()
-			} else {
-				useTableHooks.tableRef.value.revert()
-			}
-		}
-
 		return {
-			...useTableHooks,
-			tableIsFullscreen,
-			handleTableZoomBtn
+			...useTableHooks
 		}
 	}
 })

package/packages/components/sh-table/js/props.js

@@ -1,7 +1,7 @@
 export default {
 	id: {
 		type: String,
-		default: 'shtable'
+		default: ''
 	},
 	dataSourse: {
 		type: Array,
@@ -270,6 +270,12 @@ export default {
 			return {}
 		}
 	},
+	menuConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
 	footerCalculate: {
 		type: Object,
 		default() {

package/packages/components/sh-table/js/useTable.js

@@ -1,4 +1,4 @@
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
 import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields } from './tableMethods'
 
 // 记录自定义参数，传给vxe要过滤掉
@@ -41,12 +41,34 @@ const exportAndPrintDefault = {
 	useStyle: false,
 	columnFilterMethod: columnDefaultFilterMethod
 }
+const menuConfigDefault = {
+	header: {
+		options: [
+			[
+				{ code: 'HIDDEN_COLUMN', name: '隐藏' },
+				{ code: 'RESET_COLUMN', name: '取消隐藏' },
+				{ code: 'FIXED_LEFT_COLUMN', name: '固定到左侧' },
+				{ code: 'FIXED_RIGHT_COLUMN', name: '固定到右侧' },
+				{ code: 'CLEAR_FIXED_COLUMN', name: '取消固定' }
+			]
+		]
+	},
+	body: {
+		options: [
+			[
+				{ code: 'SORT_ASC', name: '升序', prefixIcon: 'fa fa-sort-alpha-desc' },
+				{ code: 'SORT_DESC', name: '倒序', prefixIcon: 'fa fa-sort-alpha-desc' },
+				{ code: 'CLEAR_SORT', name: '清除排序' }
+			]
+		]
+	}
+}
 const toolsList = [
-	{ status: 'primary', code: 'addRow', content: '新增行' },
-	{ status: 'danger', code: 'deleteRow', content: '删除行' },
-	{ status: 'primary', code: 'import', icon: 'vxe-icon-upload', content: '导入' },
-	{ status: 'success', code: 'export', icon: 'vxe-icon-download', content: '导出' },
-	{ status: 'warning', code: 'print', icon: 'vxe-icon-print', content: '打印' }
+	{ status: 'primary', code: 'addRow', icon: 'vxe-icon-square-plus', title: '新增行', circle: true },
+	{ status: 'danger', code: 'deleteRow', icon: 'vxe-icon-square-minus', title: '删除行', circle: true },
+	{ status: 'primary', code: 'import', icon: 'vxe-icon-upload', title: '导入', circle: true },
+	{ status: 'success', code: 'export', icon: 'vxe-icon-download', title: '导出', circle: true },
+	{ status: 'warning', code: 'print', icon: 'vxe-icon-print', title: '打印', circle: true }
 ]
 // 表头默认值
 const columnObjDefault = { minWidth: 120, sortable: true, filter: true }
@@ -58,10 +80,11 @@ const columnsMapDefault = {
 }
 
 export default function (props, context, proxy, isGrid) {
-	const { $vUtils, $vTableSetup, $vxePluginNames } = proxy
+	const { $vUtils, $vTableSetup, $vxePluginNames, $route } = proxy
 	const { emit, slots } = context
 
 	const tableRef = ref()
+	const toolbarRef = ref()
 	const renderKey = ref(1) // 渲染key值
 	const selectedRowKeys = ref([]) // table选中keys
 	const selectionRows = ref([]) // table选中records
@@ -166,13 +189,17 @@ export default function (props, context, proxy, isGrid) {
 			tableVmConfig.value
 		)
 	})
+	const tableToolbarConfig = computed(() => {
+		return Object.assign({ perfect: true, zoom: tableGlobalConfig.value.zoom, custom: tableGlobalConfig.value.custom }, props.toolbarConfig, tableVmConfig.value)
+	})
+	const tableMenuConfig = computed(() => Object.assign({ enabled: false }, menuConfigDefault, props.menuConfig))
 	const tableFilterConfig = computed(() => Object.assign({ clearable: true, type: 'search', placeholder: '全局关键字搜索' }, tableVmConfig.value))
 	const tableSlots = computed(() => {
 		let disSlots = ['top', 'head', 'foot', 'form', 'toolbar', 'formLeft', 'formRight', 'toolbarLeft', 'toolbarRight', 'pagerLeft', 'pagerRight']
 		return Object.keys(slots).filter(key => !disSlots.includes(key))
 	})
 	const tableBindConfig = computed(() => {
-		let defaultProps = { footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
+		let defaultProps = { id: `sh-table-${$route.fullPath}`, footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
 		let tableProps = $vUtils.omit(props, (val, key) => omitProps.includes(key) || $vUtils.isNone(val))
 		let shProps = {
 			data: tableViewData.value,
@@ -186,8 +213,10 @@ export default function (props, context, proxy, isGrid) {
 			exportConfig: tableExportConfig.value,
 			printConfig: tablePrintConfig.value,
 			moneyConfig: tableMoneyConfig.value,
-			moneyUnit: tableMoneyUnit.value
+			moneyUnit: tableMoneyUnit.value,
+			menuConfig: tableMenuConfig.value
 		}
+		if (tableMenuConfig.value.enabled) shProps.menuConfig = tableMenuConfig.value
 		return Object.assign(defaultProps, tableProps, shProps)
 	})
 	const importBindConfig = reactive({
@@ -197,6 +226,15 @@ export default function (props, context, proxy, isGrid) {
 		importConfig: props.importConfig,
 		importRules: tableEditRules.value
 	})
+	const isToolbarSlot = computed(() => {
+		const globalFg = tableGlobalConfig.value
+		const toolbarFg = tableToolbarConfig.value
+		const toolsFg = tableTools.value
+		const globalTool = globalFg.title || globalFg.globalFilter
+		const toolbarTool = toolbarFg.import || toolbarFg.export || toolbarFg.print || toolbarFg.refresh || toolbarFg.custom
+		const slotsTool = slots.toolbar || slots.toolbarLeft || slots.toolbarRight
+		return globalTool || toolbarTool || slotsTool || toolsFg.length > 0
+	})
 
 	// 获取选中数据
 	const getSelectionData = () => {
@@ -206,7 +244,8 @@ export default function (props, context, proxy, isGrid) {
 	// visible为true获取视图数据
 	const getFullData = params => {
 		const { visible = false, deleteXid = false } = params || {}
-		let data = $vUtils.clone(tableRef.value.getTableData().fullData, true)
+		let fullData = tableRef.value.internalData.afterFullData
+		let data = $vUtils.clone(fullData, true)
 		const columns = tableRef.value.getColumns()
 		let rnameColumns = columns.filter(col => col.rname)
 		rnameColumns.forEach(col => {
@@ -479,6 +518,7 @@ export default function (props, context, proxy, isGrid) {
 				handleTablePrintBtn()
 				break
 		}
+		emit('toolbar-btn-click', code)
 	}
 	// 表格导出按钮
 	const handleTableExportBtn = options => {
@@ -498,6 +538,17 @@ export default function (props, context, proxy, isGrid) {
 		}
 		return tableRef.value.openPrint(options)
 	}
+	// 关联toolbar
+	const connectToolbar = () => {
+		nextTick(() => {
+			// 将表格和工具栏进行关联
+			const $table = tableRef.value
+			const $toolbar = toolbarRef.value
+			if ($table && $toolbar) {
+				$table.connect($toolbar)
+			}
+		})
+	}
 
 	// 自定义操作列点击事件
 	const handleGoptionClick = async (btnObj, dataObj) => {
@@ -554,9 +605,7 @@ export default function (props, context, proxy, isGrid) {
 		value => {
 			initTableColumns()
 		},
-		{
-			deep: true
-		}
+		{ deep: true }
 	)
 	watch(
 		() => props.dataSourse,
@@ -564,24 +613,27 @@ export default function (props, context, proxy, isGrid) {
 			updateSelection([])
 			updateExpended()
 		},
-		{
-			immediate: true
-		}
+		{ immediate: true }
 	)
 	watch(
 		() => props.editRules,
 		value => {
 			initEditRules(value)
 		},
-		{
-			deep: true,
-			immediate: true
-		}
+		{ deep: true, immediate: true }
+	)
+	watch(
+		() => isToolbarSlot.value,
+		() => {
+			connectToolbar()
+		},
+		{ deep: true, immediate: true }
 	)
 
 	return {
 		slots,
 		tableRef,
+		toolbarRef,
 		renderKey,
 		wrapHeight,
 		tableGlobalConfig,
@@ -590,11 +642,13 @@ export default function (props, context, proxy, isGrid) {
 		tableColumnObjConfig,
 		tablePagerConfig,
 		tableQueryConfig,
+		tableToolbarConfig,
 		tableFilterText,
 		tableFilterConfig,
 		tableFilterData,
 		tableTools,
 		tableSlots,
+		isToolbarSlot,
 		selectionRows,
 		tableBindConfig,
 		importBindConfig,

package/packages/components/sh-table/table.vue

@@ -11,8 +11,8 @@
 		</div>
 		<div v-if="isToolbarSlot" ref="toolbarSlotRef" v-resize="handleResize" class="sh-table-toolbar">
 			<slot name="toolbar">
-				<div class="sh-table-toolbar-wrap">
-					<div class="sh-table-toolbar-left">
+				<vxe-toolbar ref="toolbarRef" v-bind="tableToolbarConfig">
+					<template #buttons>
 						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
 							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
 						</div>
@@ -26,24 +26,21 @@
 						<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
 							<slot name="toolbarLeft"></slot>
 						</div>
-					</div>
-					<div class="sh-table-toolbar-right">
+					</template>
+					<template #tools>
 						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
 							<slot name="toolbarRight"></slot>
 						</div>
-						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
-							<div class="sh-table-toolbar-item">
-								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
-							</div>
-						</template>
+						<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
+							<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+						</div>
 						<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
-					</div>
-				</div>
+					</template>
+				</vxe-toolbar>
 			</slot>
 		</div>
 		<div v-if="isHeadSlot" ref="headSlotRef" v-resize="handleResize" class="sh-table-head"><slot name="head"></slot></div>
 		<vxe-table
-			:id="id"
 			ref="tableRef"
 			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
@@ -93,7 +90,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, getCurrentInstance, provide, ref, reactive } from 'vue'
+import { computed, defineComponent, getCurrentInstance, ref, watch, nextTick } from 'vue'
 import './css/index.scss'
 
 import props from './js/props'
@@ -125,6 +122,7 @@ export default defineComponent({
 		'page-change',
 		'toolbar-button-click',
 		'toolbar-tool-click',
+		'toolbar-btn-click',
 
 		'form-submit',
 		'form-reset',
@@ -145,16 +143,13 @@ export default defineComponent({
 		const footSlotRef = ref()
 		const pagerSlotRef = ref()
 		const bottomSlotRef = ref()
+
 		const tableHeight = ref(props.height)
 
 		const useTableHooks = useTable(props, context, proxy)
 
 		const isTopSlot = computed(() => Boolean(slots.top))
 		const isFormSlot = computed(() => useTableHooks.tableGlobalConfig.value.search || Boolean(slots.form))
-		const isToolbarSlot = computed(() => {
-			const { title, globalFilter } = useTableHooks.tableGlobalConfig.value
-			return title || globalFilter || slots.toolbar || slots.toolbarLeft || slots.toolbarRight || useTableHooks.tableTools.value.length
-		})
 		const isHeadSlot = computed(() => Boolean(slots.head))
 		const isFootSlot = computed(() => Boolean(slots.foot))
 		const isPagerSlot = computed(() => useTableHooks.tablePagerConfig.value.enabled)
@@ -184,7 +179,6 @@ export default defineComponent({
 			tableHeight,
 			isTopSlot,
 			isFormSlot,
-			isToolbarSlot,
 			isHeadSlot,
 			isFootSlot,
 			isPagerSlot,

package/packages/components/sh-tabs/index.vue

@@ -9,10 +9,10 @@
 				<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
 					<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
 						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
-							<div v-ripple v-bind="getTabItemBind(tab, tabIndex)" @click="handleChange(tab)">
+							<div v-bind="getTabItemBind(tab, tabIndex)" @click="handleChange(tab)">
 								<slot name="tabItem" v-bind="{ ...tab, isActive: tab[labelKey] === activeKey }">
 									<div v-if="tab.icon" class="sh-tab-icon"><sh-icon :type="tab.icon"></sh-icon></div>
-									<div class="sh-tab-label">{{ tab[labelField] }}</div>
+									<div v-if="tab[labelField]" class="sh-tab-label">{{ tab[labelField] }}</div>
 									<div v-if="getTabIsClosable(tab)" class="sh-tab-close" @click.stop="handleClose(tab)"><sh-icon type="ios-close"></sh-icon></div>
 								</slot>
 							</div>
@@ -445,7 +445,10 @@ export default defineComponent({
 				.sh-tab-icon {
 					display: inline-flex;
 					align-items: center;
-					padding: 0 0.2em 0 0.7em;
+					padding: 0 0.5em;
+					& + .sh-tab-label {
+						padding-left: 0;
+					}
 				}
 				.sh-tab-label {
 					flex: 1;

package/packages/components/sh-tree/css/index.scss

@@ -34,7 +34,7 @@
 }
 
 .sh-tree-select-dropdown {
-    height: 230px
+    height: 230px;
 }
 
 .sh-vxe-tree-table{

package/packages/components/sh-tree/index.vue

@@ -94,7 +94,7 @@ export default defineComponent({
 			return ''
 		})
 		const selectConfigIn = computed(() => {
-			return Object.assign({ transfer: true, popupClassName: 'sh-tree-select-dropdown' }, props.globalConfig?.selectConfig, checkConfig.value)
+			return Object.assign({ transfer: true }, props.globalConfig?.selectConfig, checkConfig.value)
 		})
 		const selectInputConfigIn = computed(() => {
 			return Object.assign({ clearable: true, controls: false, transfer: false, suffixIcon: 'vxe-icon-caret-down', placeholder: props.placeholder }, props.globalConfig?.inputConfig)

package/packages/vxeTable/css/index.scss

@@ -162,9 +162,6 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
         .vxe-cell-href-a{
             text-decoration: underline;
         }
-        .vxe-cell--sort{
-            font-size: .9em;
-        }
     }
 }
 

package/packages/vxeTable/index.js

@@ -2,7 +2,9 @@ import VXETable from 'vxe-table'
 import './css/index.scss'
 import VXETablePluginExportXLSX from './plugins/export'
 import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
+import VXETablePluginMenus from 'vxe-table-plugin-menus'
 import { jsPDF } from 'jspdf'
+import ExcelJS from 'exceljs'
 import XEClipboard from 'xe-clipboard'
 import ShValidators from 'sh-tools/packages/utils/validate'
 import { utils } from 'sh-tools'
@@ -143,6 +145,11 @@ let vxeOptions = {
 		autoHidden: false,
 		enabled: true
 	},
+	toolbar: {
+		custom: {
+			immediate: false
+		}
+	},
 	form: {},
 	modal: {
 		lockView: true,
@@ -190,7 +197,10 @@ let vxePdfOptions = {
 	jsPDF,
 	fonts: [{ fontName: 'SourceHanSansNormal' }]
 }
-let vxeXlsxOptions = {}
+let vxeXlsxOptions = {
+	ExcelJS
+}
+let vxeMenuOptions = {}
 Object.keys(ShValidators).forEach(key => {
 	VXETable.validators.add(key, {
 		itemValidatorMethod({ itemValue }) {
@@ -207,13 +217,15 @@ VXETable.renderer.mixin(extraRenders)
 VXETable.renderer.mixin(filterRenders)
 
 const index = {
-	install(Vue, { vxeOption = {}, vxePdfOption = {}, vxeXlsxOption }) {
+	install(Vue, { vxeOption, vxePdfOption, vxeXlsxOption, vxeMenuOption }) {
 		let setupOption = utils.merge(vxeOptions, vxeOption)
 		let xlsxSetUpOption = utils.merge(vxeXlsxOptions, vxeXlsxOption)
 		let pdfSetUpOption = utils.merge(vxePdfOptions, vxePdfOption)
+		let menuSetUpOption = utils.merge(vxeMenuOptions, vxeMenuOption)
 		VXETable.setup(setupOption)
 		VXETable.use(VXETablePluginExportXLSX, xlsxSetUpOption)
 		VXETable.use(VXETablePluginExportPDF, pdfSetUpOption)
+		VXETable.use(VXETablePluginMenus, menuSetUpOption)
 		Vue.use(VXETable)
 		Vue.config.globalProperties.$vTable = VXETable
 		Vue.config.globalProperties.$vTableSetup = setupOption

package/packages/vxeTable/plugins/export.js

@@ -1,10 +1,10 @@
 import XEUtils from 'xe-utils'
-import ExcelJS from 'exceljs'
 
-let vxetable = null
+let globalVxetable = null
+let globalExcelJS = null
 
 const defaultHeaderBackgroundColor = '80c1ff'
-const defaultCellFontColor = '606266'
+const defaultCellFontColor = '333333'
 const defaultCellBorderStyle = 'thin'
 const defaultCellBorderColor = 'e7f1ff'
 
@@ -96,12 +96,15 @@ function getDefaultBorderStyle() {
 
 function exportXLSX(params) {
 	const msgKey = 'xlsx'
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { $table, options, columns, colgroups, datas } = params
 	const { props, reactData } = $table
+	const { computeColumnOpts } = $table.getComputeMaps()
 	const { headerAlign: allHeaderAlign, align: allAlign, footerAlign: allFooterAlign } = props
 	const { rowHeight } = reactData
 	const { message, sheetName, isHeader, isFooter, isMerge, isColgroup, original, useStyle, sheetMethod } = options
+	const columnOpts = computeColumnOpts.value
+	const _isCustomColumn = options._isCustomColumn
 	const showMsg = message !== false
 	const mergeCells = $table.getMergeCells()
 	const colList = []
@@ -110,10 +113,8 @@ function exportXLSX(params) {
 	const sheetMerges = []
 	let beforeRowCount = 0
 	let headerRowCount = 0
-	const colHead = {}
 	columns.forEach(column => {
-		const { id, field, renderWidth, headerExportMethod } = column
-		colHead[id] = headerExportMethod ? headerExportMethod({ column, $table }) : original ? field : column.getTitle()
+		const { id, renderWidth } = column
 		sheetCols.push({
 			key: id,
 			width: XEUtils.ceil(renderWidth / 8, 1)
@@ -129,10 +130,11 @@ function exportXLSX(params) {
 					groupHead[column.id] = null
 				})
 				cols.forEach(column => {
-					const { _colSpan, _rowSpan, headerExportMethod } = column
+					const { _colSpan, _rowSpan } = column
 					const validColumn = getValidColumn(column)
 					const columnIndex = columns.indexOf(validColumn)
-					groupHead[validColumn.id] = headerExportMethod ? headerExportMethod({ column, $table }) : original ? validColumn.field : column.getTitle()
+					const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod
+					groupHead[validColumn.id] = headExportMethod ? headExportMethod({ column, options, $table }) : original ? validColumn.field : column.getTitle()
 					if (_colSpan > 1 || _rowSpan > 1) {
 						sheetMerges.push({
 							s: { r: rIndex, c: columnIndex },
@@ -143,13 +145,19 @@ function exportXLSX(params) {
 				colList.push(groupHead)
 			})
 		} else {
+			const colHead = {}
+			columns.forEach(column => {
+				const { id, field } = column
+				const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod
+				colHead[id] = headExportMethod ? headExportMethod({ column, options, $table }) : original ? field : column.getTitle()
+			})
 			colList.push(colHead)
 		}
 		headerRowCount = colList.length
 		beforeRowCount += headerRowCount
 	}
 	// 处理合并
-	if (isMerge) {
+	if (isMerge && !_isCustomColumn) {
 		mergeCells.forEach(mergeItem => {
 			const { row: mergeRowIndex, rowspan: mergeRowspan, col: mergeColIndex, colspan: mergeColspan } = mergeItem
 			sheetMerges.push({
@@ -172,7 +180,7 @@ function exportXLSX(params) {
 		const footers = getFooterData(options, footerData)
 		const mergeFooterItems = $table.getMergeFooterItems()
 		// 处理合并
-		if (isMerge) {
+		if (isMerge && !_isCustomColumn) {
 			mergeFooterItems.forEach(mergeItem => {
 				const { row: mergeRowIndex, rowspan: mergeRowspan, col: mergeColIndex, colspan: mergeColspan } = mergeItem
 				sheetMerges.push({
@@ -190,7 +198,7 @@ function exportXLSX(params) {
 		})
 	}
 	const exportMethod = () => {
-		const workbook = new ExcelJS.Workbook()
+		const workbook = new (globalExcelJS || window.ExcelJS).Workbook()
 		const sheet = workbook.addWorksheet(sheetName, { views: [{ state: 'frozen', xSplit: 0, ySplit: headerRowCount }] })
 		workbook.creator = 'vxe-table'
 		sheet.columns = sheetCols
@@ -271,7 +279,8 @@ function exportXLSX(params) {
 				})
 			})
 		}
-		if (useStyle && sheetMethod) {
+		// 自定义处理
+		if (sheetMethod) {
 			sheetMethod({ options: options, workbook, worksheet: sheet, columns, colgroups, datas, $table })
 		}
 		sheetMerges.forEach(({ s, e }) => {
@@ -296,7 +305,7 @@ function exportXLSX(params) {
 }
 
 function downloadFile(params, blob, options) {
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { message, filename, type } = options
 	const showMsg = message !== false
 	if (window.Blob) {
@@ -323,7 +332,7 @@ function checkImportData(tableFields, fields) {
 }
 
 function importError(params) {
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { $table, options } = params
 	const { internalData } = $table
 	const { _importReject } = internalData
@@ -337,7 +346,7 @@ function importError(params) {
 }
 
 function importXLSX(params) {
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { $table, columns, options, file } = params
 	const { internalData } = $table
 	const { _importResolve } = internalData
@@ -354,7 +363,7 @@ function importXLSX(params) {
 				tableFields.push(field)
 			}
 		})
-		const workbook = new ExcelJS.Workbook()
+		const workbook = new (globalExcelJS || window.ExcelJS).Workbook()
 		const readerTarget = evnt.target
 		if (readerTarget) {
 			workbook.xlsx.load(readerTarget.result).then(wb => {
@@ -421,22 +430,26 @@ function handleExportEvent(params) {
 }
 
 /**
- * 基于 vxe-table 表格的增强插件，支持导出 xlsx 格式
+ * 基于 vxe-table 表格的扩展插件，支持导出 xlsx 格式
  */
 export const VXETablePluginExportXLSX = {
-	install(vxetablecore) {
-		const { setup, interceptor } = vxetablecore
+	install(vxetable, options) {
+		// 检查版本
+		if (!/^(4)\./.test(vxetable.version)) {
+			console.error('[vxe-table-plugin-export-pdf] Version vxe-table 4.x is required')
+		}
 
-		vxetable = vxetablecore
+		globalVxetable = vxetable
+		globalExcelJS = options ? options.ExcelJS : null
 
-		setup({
+		vxetable.config({
 			export: {
 				types: {
 					xlsx: 0
 				}
 			}
 		})
-		interceptor.mixin({
+		vxetable.interceptor.mixin({
 			'event.import': handleImportEvent,
 			'event.export': handleExportEvent
 		})

package/packages/vxeTable/render/cell/vxe-render-tree.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 					$vUtils.set(props.rdata, fromKey, fromvalue)
 				})
 			}
-			useCell.setRenderValue(rvalue, true)
+			useCell.setRenderValue(rvalue)
 		}
 
 		return {

package/packages/vxeTable/render/globalRenders.jsx

@@ -43,7 +43,7 @@ let defaultProps = {
 	$vTextArea: { placeholder: '请输入', rows: 2, transfer: true, resize: 'none', showWordCount: true },
 	$vSelect: { placeholder: '请选择', filterable: true, transfer: true, showType: 'text', tagColor: 'default', split: ',', options: [] },
 	$vTree: { placeholder: '请选择', transfer: true, split: ',', nodeKey: 'id', labelField: 'label' },
-	$vTime: { type: 'date', placeholder: '请选择时间', transfer: true, editable: false, prefixType: 'text', suffixType: 'text' },
+	$vTime: { type: 'date', placeholder: '请选择时间', transfer: true, editable: false, prefixType: 'text', suffixType: 'text', separator: '至' },
 	$vProgress: { strokeWidth: 20, strokeColor: ['#108ee9', '#87d068'], textInside: true, min: 0, max: 100, digits: 2 },
 	$vSwitch: { placeholder: '请选择', openLabel: '是', openValue: '1', closeLabel: '否', closeValue: '0' },
 	$vMoney: { type: 'number', placeholder: '请输入', transfer: true, commafy: true, digits: 2, moneyUnit: 1, min: 0, max: 1000000000000 },

package/packages/vxeTable/render/mixin/cell-hooks.js

@@ -27,6 +27,7 @@ export default function (props, context, proxy) {
 	// 初始化数据
 	const initData = () => {
 		let keyValue = $vUtils.get(props.rdata, props.rkey)
+		if (keyValue && $vUtils.isEqual(keyValue, renderValue.value)) return
 		formatValueFun(keyValue)
 	}
 
@@ -98,10 +99,18 @@ export default function (props, context, proxy) {
 			renderText.value = footerText
 			return
 		}
-		let formatObj = $vUtils.formatRender(value, props.rkey, props.rdata, props.rname, props.rprops, proxy, editable)
-		renderValue.value = ['$vMoney'].includes(props.rname) ? formatObj.rtext : formatObj.rvalue
-		renderText.value = formatObj.rtext
-		return formatObj
+		const { rvalue, rtext } = $vUtils.formatRender(value, props.rkey, props.rdata, props.rname, props.rprops, proxy, editable)
+		if (['$vMoney'].includes(props.rname)) {
+			renderValue.value = rtext
+		} else {
+			renderValue.value = rvalue
+		}
+		if (props.rname === '$vTime' && props.rprops.range && Array.isArray(rtext) && rtext.length > 0) {
+			renderText.value = `${rtext[0] || ''}${props.rprops.separator}${rtext[1] || ''}`
+		} else {
+			renderText.value = rtext
+		}
+		return { rvalue, rtext }
 	}
 	const getBillClass = bil => {
 		return { basic: bil.fullText === '元', commafy: ['千', '百万', '十亿', '兆'].includes(bil.fullText) }