diff --git a/package.json b/package.json index ab9dbb1f..bb3513cf 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,9 @@ "screenfull": "6.0.2", "vue": "3.4.21", "vue-router": "4.3.0", - "vxe-table": "4.4.1", - "vxe-table-plugin-element": "3.0.7", - "xe-utils": "3.5.11" + "vxe-table": "4.5.21", + "vxe-table-plugin-element": "4.0.1", + "xe-utils": "3.5.22" }, "devDependencies": { "@types/js-cookie": "3.0.6", diff --git a/src/plugins/vxe-table/index.ts b/src/plugins/vxe-table/index.ts index 4af979d4..5193fb82 100644 --- a/src/plugins/vxe-table/index.ts +++ b/src/plugins/vxe-table/index.ts @@ -7,7 +7,7 @@ import VXETablePluginElement from "vxe-table-plugin-element" VXETable.use(VXETablePluginElement) /** 全局默认参数 */ -VXETable.setup({ +VXETable.config({ /** 全局尺寸 */ size: "medium", /** 全局 zIndex 起始值,如果项目的的 z-index 样式值过大时就需要跟随设置更大,避免被遮挡 */ diff --git a/src/styles/theme/core/vxe-table.scss b/src/styles/theme/core/vxe-table.scss index 57fa5ef7..311c4c12 100644 --- a/src/styles/theme/core/vxe-table.scss +++ b/src/styles/theme/core/vxe-table.scss @@ -1,58 +1,55 @@ /** - * Vxe Table SCSS 变量 - * 在此查阅所有可自定义的变量:https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss + * Vxe Table CSS 变量 + * 在此查阅所有可自定义的变量:https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss */ -/** font */ -$vxe-font-color: $font-color; - -/** color */ -$vxe-primary-color: $theme-color; -$vxe-success-color: $theme-color; - -/** input/radio/checkbox */ -$vxe-input-border-color: $theme-color; -$vxe-input-disabled-color: $theme-color; -$vxe-input-disabled-background-color: lighten($theme-bg-color, 12%); - -/** popup */ -$vxe-table-popup-border-color: $border-color; - -/** table */ -$vxe-table-font-color: $font-color; -$vxe-table-border-color: $border-color; -$vxe-table-header-background-color: lighten($theme-bg-color, 8%); -$vxe-table-body-background-color: lighten($theme-bg-color, 4%); -$vxe-table-row-hover-background-color: lighten($theme-bg-color, 8%); -$vxe-table-row-current-background-color: lighten($theme-bg-color, 8%); -$vxe-table-row-hover-current-background-color: lighten($theme-bg-color, 8%); -$vxe-table-checkbox-range-background-color: lighten($theme-bg-color, 8%); - -/** toolbar */ -$vxe-toolbar-background-color: lighten($theme-bg-color, 4%); -$vxe-toolbar-custom-active-background-color: lighten($theme-bg-color, 16%); -$vxe-toolbar-panel-background-color: lighten($theme-bg-color, 4%); - -/** pager */ -$vxe-pager-background-color: lighten($theme-bg-color, 4%); - -/** modal */ -$vxe-modal-header-background-color: lighten($theme-bg-color, 4%); -$vxe-modal-body-background-color: lighten($theme-bg-color, 4%); -$vxe-modal-border-color: $border-color; - -/** button */ -$vxe-button-default-background-color: lighten($theme-bg-color, 8%); - -/** input */ -$vxe-input-background-color: lighten($theme-bg-color, 4%); -$vxe-input-panel-background-color: $vxe-input-background-color; - -/** form */ -$vxe-form-background-color: lighten($theme-bg-color, 4%); - -/** select */ -$vxe-select-option-hover-background-color: lighten($theme-bg-color, 8%); -$vxe-select-panel-background-color: lighten($theme-bg-color, 4%); - -@import "vxe-table/styles/index.scss"; +* { + /*color*/ + --vxe-font-color: #{$font-color}; + --vxe-primary-color: #{$theme-color}; + --vxe-success-color: #{$theme-color}; + + /*input/radio/checkbox*/ + --vxe-input-border-color: #{$theme-color}; + --vxe-input-disabled-color: #{$theme-color}; + --vxe-input-disabled-background-color: #{lighten($theme-bg-color, 12%)}; + + /*popup*/ + --vxe-table-popup-border-color: #{$border-color}; + + /*table*/ + --vxe-table-border-color: #{$border-color}; + --vxe-table-header-background-color: #{lighten($theme-bg-color, 8%)}; + --vxe-table-body-background-color: #{lighten($theme-bg-color, 4%)}; + --vxe-table-row-hover-background-color: #{lighten($theme-bg-color, 8%)}; + --vxe-table-row-current-background-color: #{lighten($theme-bg-color, 8%)}; + --vxe-table-row-hover-current-background-color: #{lighten($theme-bg-color, 8%)}; + --vxe-table-checkbox-range-background-color: #{lighten($theme-bg-color, 8%)}; + + /*toolbar*/ + --vxe-toolbar-background-color: #{lighten($theme-bg-color, 4%)}; + --vxe-toolbar-custom-active-background-color: #{lighten($theme-bg-color, 16%)}; + --vxe-toolbar-panel-background-color: #{lighten($theme-bg-color, 4%)}; + + /*pager*/ + --vxe-pager-background-color: #{lighten($theme-bg-color, 4%)}; + + /*modal*/ + --vxe-modal-header-background-color: #{lighten($theme-bg-color, 4%)}; + --vxe-modal-body-background-color: #{lighten($theme-bg-color, 4%)}; + --vxe-modal-border-color: #{$border-color}; + + /*button*/ + --vxe-button-default-background-color: #{lighten($theme-bg-color, 8%)}; + + /*input*/ + --vxe-input-background-color: #{lighten($theme-bg-color, 4%)}; + --vxe-input-panel-background-color: #{lighten($theme-bg-color, 4%)}; + + /*form*/ + --vxe-form-background-color: #{lighten($theme-bg-color, 4%)}; + + /*select*/ + --vxe-select-option-hover-background-color: #{lighten($theme-bg-color, 8%)}; + --vxe-select-panel-background-color: #{lighten($theme-bg-color, 4%)}; +}