From 72923c6d63aef78b4aeb9b6d63db9520606dad8d Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Fri, 7 May 2021 20:41:00 +0800
Subject: [PATCH] =?UTF-8?q?=EF=BC=88=E9=83=A8=E5=88=86=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=EF=BC=89=E5=8F=82=E6=95=B0=20start-week=20=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=20start-day=E3=80=81=E4=BF=AE=E6=94=B9=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=97=A0=E6=B3=95=E8=BF=98=E5=8E=9F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/api/input.js                     | 23 +++++++++++++++++++--
 examples/views/input/Input.vue            |  2 +-
 examples/views/pulldown/Pulldown.vue      | 14 ++++++-------
 examples/views/table/advanced/Dynamic.vue |  4 ++--
 examples/views/table/base/Resizable.vue   |  8 ++++----
 examples/views/table/start/Global.vue     |  2 +-
 package.json                              |  2 +-
 packages/input/src/input.js               | 22 +++++++++++++++-----
 packages/table/src/methods.js             |  8 ++++++--
 packages/table/src/util.js                | 25 +++++++++++++++++++----
 packages/v-x-e-table/src/conf.js          |  3 ++-
 styles/button.scss                        |  2 +-
 styles/checkbox.scss                      |  1 +
 styles/footer.scss                        |  2 +-
 styles/header.scss                        |  1 +
 styles/input.scss                         |  3 +++
 styles/list.scss                          |  1 +
 styles/pager.scss                         |  9 +-------
 styles/radio.scss                         |  3 ++-
 styles/switch.scss                        |  6 +++---
 styles/table.scss                         | 25 ++++++++++-------------
 styles/toolbar.scss                       |  1 +
 styles/variable.scss                      | 25 +++++++++++++++--------
 23 files changed, 125 insertions(+), 67 deletions(-)

diff --git a/examples/api/input.js b/examples/api/input.js
index a958cbec3..39e90c714 100644
--- a/examples/api/input.js
+++ b/examples/api/input.js
@@ -218,11 +218,30 @@ const apis = [
       },
       {
         name: 'start-week',
-        desc: '只对 type=week 有效，设置起始周',
+        disabled: true,
+        desc: '即将废弃，请使用 start-day',
         version: '',
         type: 'number | string',
         enum: '0, 1, 2, 3, 4, 5, 6',
-        defVal: '默认 1，继承 setup.input.startWeek',
+        defVal: '',
+        list: []
+      },
+      {
+        name: 'start-day',
+        desc: '设置每周的起始日期是星期几',
+        version: '3.3.2',
+        type: 'number | string',
+        enum: '0, 1, 2, 3, 4, 5, 6',
+        defVal: '默认 1，继承 setup.input.startDay',
+        list: []
+      },
+      {
+        name: 'select-day',
+        desc: '只对 type=week 有效，设置周视图选中后返回星期几',
+        version: '3.3.2',
+        type: 'number | string',
+        enum: '0, 1, 2, 3, 4, 5, 6',
+        defVal: '默认 1，继承 setup.input.selectDay',
         list: []
       },
       {
diff --git a/examples/views/input/Input.vue b/examples/views/input/Input.vue
index 3339d71cc..2474c41a1 100644
--- a/examples/views/input/Input.vue
+++ b/examples/views/input/Input.vue
@@ -3,7 +3,7 @@
     <h2>{{ $t('app.aside.nav.input') }}</h2>
     <p class="tip">
       输入框、选择器，查看 <router-link class="link" :to="{name: 'VXEAPI', params: {name: 'input'}}">API</router-link><br>
-      <span class="red">（注：输入组件只能是字符串类型，其他类型谨慎使用）</span>
+      <span class="red">（注：输入组件输出为字符串类型）</span>
     </p>
 
     <p>
diff --git a/examples/views/pulldown/Pulldown.vue b/examples/views/pulldown/Pulldown.vue
index 6cdbb89fa..9202470f8 100644
--- a/examples/views/pulldown/Pulldown.vue
+++ b/examples/views/pulldown/Pulldown.vue
@@ -58,6 +58,7 @@
         <template #dropdown>
           <div class="my-dropdown4">
             <vxe-grid
+              border
               highlight-hover-row
               auto-resize
               height="auto"
@@ -176,6 +177,7 @@ export default {
             <template #dropdown>
               <div class="my-dropdown4">
                 <vxe-grid
+                  border
                   highlight-hover-row
                   auto-resize
                   height="auto"
@@ -308,16 +310,16 @@ export default {
           height: 200px;
           overflow: auto;
           border-radius: 4px;
-          background-color: #fff;
           border: 1px solid #dcdfe6;
+          background-color: #fff;
         }
         .list-item1:hover {
           background-color: #f5f7fa;
         }
         .my-dropdown2 {
           border-radius: 4px;
-          background-color: #fff;
           border: 1px solid #dcdfe6;
+          background-color: #fff;
         }
         .list-item2:hover {
           background-color: #f5f7fa;
@@ -325,14 +327,12 @@ export default {
         .my-dropdown3 {
           width: 400px;
           background-color: #fff;
-          border: 1px solid #dcdfe6;
           box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
         }
         .my-dropdown4 {
           width: 600px;
           height: 300px;
           background-color: #fff;
-          border: 1px solid #dcdfe6;
           box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
         }
         `
@@ -419,16 +419,16 @@ export default {
   height: 200px;
   overflow: auto;
   border-radius: 4px;
-  background-color: #fff;
   border: 1px solid #dcdfe6;
+  background-color: #fff;
 }
 .list-item1:hover {
   background-color: #f5f7fa;
 }
 .my-dropdown2 {
   border-radius: 4px;
-  background-color: #fff;
   border: 1px solid #dcdfe6;
+  background-color: #fff;
 }
 .list-item2:hover {
   background-color: #f5f7fa;
@@ -436,14 +436,12 @@ export default {
 .my-dropdown3 {
   width: 400px;
   background-color: #fff;
-  border: 1px solid #dcdfe6;
   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
 }
 .my-dropdown4 {
   width: 600px;
   height: 300px;
   background-color: #fff;
-  border: 1px solid #dcdfe6;
   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
 }
 </style>
diff --git a/examples/views/table/advanced/Dynamic.vue b/examples/views/table/advanced/Dynamic.vue
index 58a54ca3e..7b749a939 100644
--- a/examples/views/table/advanced/Dynamic.vue
+++ b/examples/views/table/advanced/Dynamic.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <p class="tip">
-      使用 v-for 去循环静态列是不建议的，需确保 key 唯一性<span class="green">（动态场景需使用 <grid-api-link name="vxe-grid"/> 进行渲染）</span><br>
+      使用 v-for 去循环静态列是非常糟糕的，仅用于改变属性，需确保 key 唯一性<span class="green">（动态场景需使用 <grid-api-link name="vxe-grid"/> 进行渲染）</span><br>
       如果列信息发生变动，则需要通过调用 <table-api-link prop="refreshColumn"/> 方法刷新列信息<br>
-      <span class="red">（注：该用法是不建议使用，该示例仅供参考）</span>
+      <span class="red">（注：该用法是不建议使用，所有兼容性应自行解决，该示例仅供参考）</span>
     </p>
 
     <vxe-toolbar>
diff --git a/examples/views/table/base/Resizable.vue b/examples/views/table/base/Resizable.vue
index c6e3d5963..285fe3a5b 100644
--- a/examples/views/table/base/Resizable.vue
+++ b/examples/views/table/base/Resizable.vue
@@ -7,7 +7,7 @@
       :data="tableData">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
       <vxe-table-column field="name" title="Name"></vxe-table-column>
-      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
+      <vxe-table-column field="sex" title="最小列宽" min-width="20%"></vxe-table-column>
       <vxe-table-column field="age" title="Age"></vxe-table-column>
       <vxe-table-column field="time" title="Time"></vxe-table-column>
       <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
@@ -29,7 +29,7 @@
       :data="tableData">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
       <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
-      <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>
+      <vxe-table-column field="sex" title="最小列宽" min-width="300"></vxe-table-column>
       <vxe-table-column field="age" title="Age" width="300"></vxe-table-column>
       <vxe-table-column field="time" title="Time" width="300"></vxe-table-column>
       <vxe-table-column field="address" title="Address" width="300" show-overflow></vxe-table-column>
@@ -198,7 +198,7 @@ export default {
           :data="tableData">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
           <vxe-table-column field="name" title="Name"></vxe-table-column>
-          <vxe-table-column field="sex" title="Sex"></vxe-table-column>
+          <vxe-table-column field="sex" title="最小列宽" min-width="20%"></vxe-table-column>
           <vxe-table-column field="age" title="Age"></vxe-table-column>
           <vxe-table-column field="time" title="Time"></vxe-table-column>
           <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
@@ -226,7 +226,7 @@ export default {
           :data="tableData">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
           <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
-          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>
+          <vxe-table-column field="sex" title="最小列宽" min-width="300"></vxe-table-column>
           <vxe-table-column field="age" title="Age" width="300"></vxe-table-column>
           <vxe-table-column field="time" title="Time" width="300"></vxe-table-column>
           <vxe-table-column field="address" title="Address" width="300" show-overflow></vxe-table-column>
diff --git a/examples/views/table/start/Global.vue b/examples/views/table/start/Global.vue
index 816f02010..e6bead915 100644
--- a/examples/views/table/start/Global.vue
+++ b/examples/views/table/start/Global.vue
@@ -133,7 +133,7 @@
           //   parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',
           //   labelFormat: '',
           //   valueFormat: '',
-          //   startWeek: 1,
+          //   startDay: 1,
           //   digits: 2,
           //   controls: true
           // },
diff --git a/package.json b/package.json
index 7837f6e11..34e1cc773 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.3.1",
+  "version": "3.3.2-beta.0",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/packages/input/src/input.js b/packages/input/src/input.js
index 9058f088c..e96fa139e 100644
--- a/packages/input/src/input.js
+++ b/packages/input/src/input.js
@@ -656,13 +656,18 @@ export default {
     dateConfig: Object,
     minDate: { type: [String, Number, Date], default: () => GlobalConfig.input.minDate },
     maxDate: { type: [String, Number, Date], default: () => GlobalConfig.input.maxDate },
-    startWeek: { type: Number, default: () => GlobalConfig.input.startWeek },
+    // 已废弃 startWeek，被 startDay 替换
+    startWeek: Number,
+    startDay: { type: [String, Number], default: () => GlobalConfig.input.startDay },
     labelFormat: { type: String, default: () => GlobalConfig.input.labelFormat },
     valueFormat: { type: String, default: () => GlobalConfig.input.valueFormat },
     editable: { type: Boolean, default: true },
     festivalMethod: { type: Function, default: () => GlobalConfig.input.festivalMethod },
     disabledMethod: { type: Function, default: () => GlobalConfig.input.disabledMethod },
 
+    // week
+    selectDay: { type: Number, default: () => GlobalConfig.input.selectDay },
+
     prefixIcon: String,
     suffixIcon: String,
     placement: String,
@@ -798,7 +803,8 @@ export default {
     weekDatas () {
       const weeks = []
       if (this.isDatePickerType) {
-        let sWeek = XEUtils.toNumber(this.startWeek)
+        const { startDay, startWeek } = this
+        let sWeek = XEUtils.toNumber(XEUtils.isNumber(startDay) || XEUtils.isString(startDay) ? startDay : startWeek)
         weeks.push(sWeek)
         for (let index = 0; index < 6; index++) {
           if (sWeek >= 6) {
@@ -1290,15 +1296,21 @@ export default {
                   }
                   this.inputValue = inpDateVal
                 } else {
+                  let isChange = false
                   if (type === 'datetime') {
-                    if (!XEUtils.isDateSame(inputValue, inpDateVal, dateLabelFormat)) {
+                    if (inputValue !== XEUtils.toDateString(this.dateValue, dateLabelFormat) || inputValue !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
+                      isChange = true
                       datetimePanelValue.setHours(inpDateVal.getHours())
                       datetimePanelValue.setMinutes(inpDateVal.getMinutes())
                       datetimePanelValue.setSeconds(inpDateVal.getSeconds())
                     }
+                  } else {
+                    isChange = true
                   }
                   this.inputValue = XEUtils.toDateString(inpDateVal, dateLabelFormat)
-                  this.dateChange(inpDateVal)
+                  if (isChange) {
+                    this.dateChange(inpDateVal)
+                  }
                 }
               } else {
                 this.dateRevert()
@@ -1698,7 +1710,7 @@ export default {
     dateChange (date) {
       const { value, datetimePanelValue, dateValueFormat } = this
       if (this.type === 'week') {
-        const sWeek = XEUtils.toNumber(this.startWeek)
+        const sWeek = XEUtils.toNumber(this.selectDay)
         date = XEUtils.getWhatWeek(date, 0, sWeek)
       } else if (this.hasTime) {
         date.setHours(datetimePanelValue.getHours())
diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js
index 5765f3dd5..d5840aacc 100644
--- a/packages/table/src/methods.js
+++ b/packages/table/src/methods.js
@@ -840,10 +840,14 @@ const Methods = {
   revertData (rows, field) {
     const { keepSource, tableSourceData, treeConfig } = this
     if (keepSource) {
-      if (arguments.length) {
-        if (rows && !XEUtils.isArray(rows)) {
+      if (rows) {
+        if (!XEUtils.isArray(rows)) {
           rows = [rows]
         }
+      } else {
+        rows = XEUtils.toArray(this.getUpdateRecords())
+      }
+      if (rows.length) {
         rows.forEach(row => {
           if (!this.isInsertByRow(row)) {
             const rowIndex = this.getRowIndex(row)
diff --git a/packages/table/src/util.js b/packages/table/src/util.js
index f5965a116..f3004a087 100644
--- a/packages/table/src/util.js
+++ b/packages/table/src/util.js
@@ -1,5 +1,6 @@
 import VXETable from '../../v-x-e-table'
 import XEUtils from 'xe-utils'
+import { DomTools } from '../../tools'
 
 const lineOffsetSizes = {
   mini: 3,
@@ -42,13 +43,14 @@ export function getColMinWidth (params) {
   const { $table, column, cell } = params
   const { showHeaderOverflow: allColumnHeaderOverflow, resizableOpts } = $table
   const { minWidth } = resizableOpts
+  // 如果自定义调整宽度逻辑
   if (minWidth) {
     const customMinWidth = XEUtils.isFunction(minWidth) ? minWidth(params) : minWidth
     if (customMinWidth !== 'auto') {
       return Math.max(1, XEUtils.toNumber(customMinWidth))
     }
   }
-  const { showHeaderOverflow } = column
+  const { showHeaderOverflow, minWidth: colMinWidth } = column
   const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
   const showEllipsis = headOverflow === 'ellipsis'
   const showTitle = headOverflow === 'title'
@@ -56,7 +58,8 @@ export function getColMinWidth (params) {
   const hasEllipsis = showTitle || showTooltip || showEllipsis
   const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.6)
   const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryCellElement(cell, ''))
-  let colMinWidth = minTitleWidth + paddingLeftRight
+  let mWidth = minTitleWidth + paddingLeftRight
+  // 默认最小宽处理
   if (hasEllipsis) {
     const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '--title>.vxe-cell--checkbox'))
     const requiredIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'))
@@ -64,9 +67,23 @@ export function getColMinWidth (params) {
     const helpIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-help-icon'))
     const sortIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'))
     const filterIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'))
-    colMinWidth += checkboxIconWidth + requiredIconWidth + editIconWidth + helpIconWidth + filterIconWidth + sortIconWidth
+    mWidth += checkboxIconWidth + requiredIconWidth + editIconWidth + helpIconWidth + filterIconWidth + sortIconWidth
   }
-  return colMinWidth
+  // 如果设置最小宽
+  if (colMinWidth) {
+    const { tableBody } = $table.$refs
+    const bodyElem = tableBody ? tableBody.$el : null
+    if (bodyElem) {
+      if (DomTools.isScale(colMinWidth)) {
+        const bodyWidth = bodyElem.clientWidth - 1
+        const meanWidth = bodyWidth / 100
+        return Math.max(mWidth, Math.floor(XEUtils.toInteger(colMinWidth) * meanWidth))
+      } else if (DomTools.isPx(colMinWidth)) {
+        return Math.max(mWidth, XEUtils.toInteger(colMinWidth))
+      }
+    }
+  }
+  return mWidth
 }
 
 function countTreeExpand (prevRow, params) {
diff --git a/packages/v-x-e-table/src/conf.js b/packages/v-x-e-table/src/conf.js
index 6a4908cdc..b1ef36dd3 100644
--- a/packages/v-x-e-table/src/conf.js
+++ b/packages/v-x-e-table/src/conf.js
@@ -250,7 +250,8 @@ export default {
     // valueFormat: '',
     minDate: new Date(1900, 0, 1),
     maxDate: new Date(2100, 0, 1),
-    startWeek: 1,
+    startDay: 1,
+    selectDay: 1,
     digits: 2,
     controls: true
   },
diff --git a/styles/button.scss b/styles/button.scss
index c0ed0748b..3fdb16a55 100644
--- a/styles/button.scss
+++ b/styles/button.scss
@@ -366,7 +366,7 @@ $btnThemeList: (
 }
 .vxe-button--dropdown-wrapper {
   padding: 5px;
-  background-color: #fff;
+  background-color: $vxe-button-dropdown-panel-background-color;
   border-radius: $vxe-border-radius;
   border: 1px solid $vxe-input-border-color;
   box-shadow: 0 1px 6px rgba(0,0,0,.2);
diff --git a/styles/checkbox.scss b/styles/checkbox.scss
index 890f9a198..4369d2aa7 100644
--- a/styles/checkbox.scss
+++ b/styles/checkbox.scss
@@ -17,6 +17,7 @@
   user-select: none;
   line-height: 1;
   cursor: pointer;
+  color: $vxe-font-color;
   &+.vxe-checkbox {
     margin-left: 10px;
   }
diff --git a/styles/footer.scss b/styles/footer.scss
index 285823aef..612a14b62 100644
--- a/styles/footer.scss
+++ b/styles/footer.scss
@@ -1,8 +1,8 @@
 /**Variable**/
 
 .vxe-table--footer-wrapper {
+  color: $vxe-table-footer-font-color;
   margin-top: -1px;
-  background-color: $vxe-table-background-color;
   &.body--wrapper{
     overflow-x: auto;
   }
diff --git a/styles/header.scss b/styles/header.scss
index 46fe9ae4c..a653975fd 100644
--- a/styles/header.scss
+++ b/styles/header.scss
@@ -2,6 +2,7 @@
 
 .vxe-table {
   .vxe-table--header-wrapper {
+    color: $vxe-table-header-font-color;
     .vxe-table--header-border-line {
       position: absolute;
       left: 0;
diff --git a/styles/input.scss b/styles/input.scss
index 4afffc41d..cbd258026 100644
--- a/styles/input.scss
+++ b/styles/input.scss
@@ -20,6 +20,9 @@ $iconWidth: 1.6em;
   &::placeholder {
     color: $vxe-input-placeholder-color;
   }
+  &::-webkit-autofill {
+    background-color: $vxe-input-background-color;
+  }
   &[type="number"] {
     appearance: none;
     -moz-appearance: textfield;
diff --git a/styles/list.scss b/styles/list.scss
index adb9a5f1f..6c5ffcf4e 100644
--- a/styles/list.scss
+++ b/styles/list.scss
@@ -4,6 +4,7 @@
   position: relative;
   display: block;
   padding: 0;
+  color: $vxe-font-color;
   .vxe-list--virtual-wrapper {
     position: relative;
     overflow: auto;
diff --git a/styles/pager.scss b/styles/pager.scss
index f83bc62c2..0c6c0023d 100644
--- a/styles/pager.scss
+++ b/styles/pager.scss
@@ -97,14 +97,7 @@
   &.is--perfect {
     border: 1px solid $vxe-table-border-color;
     border-top-width: 0;
-    background-color: $vxe-table-header-background-color;
-    .vxe-pager--prev-btn,
-    .vxe-pager--next-btn,
-    .vxe-pager--jump-prev,
-    .vxe-pager--num-btn,
-    .vxe-pager--jump-next {
-      background-color: #fff;
-    }
+    background-color: $vxe-pager-perfect-background-color;
   }
   &.is--border {
     .vxe-pager--num-btn {
diff --git a/styles/radio.scss b/styles/radio.scss
index 963a0ed6e..587ba51a8 100644
--- a/styles/radio.scss
+++ b/styles/radio.scss
@@ -21,6 +21,7 @@
   user-select: none;
   line-height: 1;
   cursor: pointer;
+  color: $vxe-font-color;
   > input {
     &[type="radio"] {
       position: absolute;
@@ -107,7 +108,7 @@
 
 .vxe-radio-button {
   .vxe-radio--label {
-    background-color: #fff;
+    background-color: $vxe-radio-button-default-background-color;
   }
   &:first-child {
     .vxe-radio--label {
diff --git a/styles/switch.scss b/styles/switch.scss
index b6328e290..7a7149377 100644
--- a/styles/switch.scss
+++ b/styles/switch.scss
@@ -18,7 +18,7 @@
   &.is--on {
     .vxe-switch--button {
       padding-right: 1.7em;
-      background-color: $vxe-primary-color;
+      background-color: $vxe-switch-open-background-color;
     }
     .vxe-switch--icon {
       left: 100%;
@@ -28,7 +28,7 @@
   &.is--off {
     .vxe-switch--button {
       padding-left: 1.7em;
-      background-color: rgba(0,0,0,.35);
+      background-color: $vxe-switch-close-background-color;
     }
     .vxe-switch--icon {
       left: 0.2em;
@@ -66,7 +66,7 @@
     }
     &.is--off {
       .vxe-switch--button {
-        background-color: rgba(0,0,0,.15);
+        background-color: $vxe-switch-disabled-background-color;
       }
     }
   }
diff --git a/styles/table.scss b/styles/table.scss
index 4a58bcf31..5a97d635b 100644
--- a/styles/table.scss
+++ b/styles/table.scss
@@ -351,10 +351,10 @@
       background-color: $vxe-table-row-striped-background-color;
     }
     &.row--radio {
-      background-color: $vxe-table-row-radio-background-color;
+      background-color: $vxe-table-row-radio-checked-background-color;
     }
     &.row--checked {
-      background-color: $vxe-table-row-checked-background-color;
+      background-color: $vxe-table-row-checkbox-checked-background-color;
     }
     &.row--current {
       background-color: $vxe-table-row-current-background-color;
@@ -365,10 +365,10 @@
         background-color: $vxe-table-row-hover-striped-background-color;
       }
       &.row--radio {
-        background-color: $vxe-table-row-hover-radio-background-color;
+        background-color: $vxe-table-row-hover-radio-checked-background-color;
       }
       &.row--checked {
-        background-color: $vxe-table-row-hover-checked-background-color;
+        background-color: $vxe-table-row-hover-checkbox-checked-background-color;
       }
       &.row--current {
         background-color: $vxe-table-row-hover-current-background-color;
@@ -384,12 +384,12 @@
   //     }
   //     &.row--radio {
   //       .vxe-tree--btn-wrapper {
-  //         background-color: $vxe-table-row-radio-background-color;
+  //         background-color: $vxe-table-row-radio-checked-background-color;
   //       }
   //     }
   //     &.row--checked {
   //       .vxe-tree--btn-wrapper {
-  //         background-color: $vxe-table-row-checked-background-color;
+  //         background-color: $vxe-table-row-checkbox-checked-background-color;
   //       }
   //     }
   //     &.row--current {
@@ -408,12 +408,12 @@
   //       }
   //       &.row--radio {
   //         .vxe-tree--btn-wrapper {
-  //           background-color: $vxe-table-row-hover-radio-background-color;
+  //           background-color: $vxe-table-row-hover-radio-checked-background-color;
   //         }
   //       }
   //       &.row--checked {
   //         .vxe-tree--btn-wrapper {
-  //           background-color: $vxe-table-row-hover-checked-background-color;
+  //           background-color: $vxe-table-row-hover-checkbox-checked-background-color;
   //         }
   //       }
   //       &.row--current {
@@ -578,7 +578,7 @@
   &.border--inner,
   &.border--none {
     .vxe-table--header-wrapper {
-      background-color: $vxe-table-background-color;
+      background-color: $vxe-table-body-background-color;
     }
     .vxe-table--fixed-left-wrapper {
       border-right: 0;
@@ -747,13 +747,13 @@
     left: 0;
     width: 200px;
     &.scrolling--middle {
-      box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12);
+      box-shadow: $vxe-table-fixed-left-scrolling-box-shadow;
     }
   }
   .vxe-table--fixed-right-wrapper {
     right: 0;
     &.scrolling--middle {
-      box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12);
+      box-shadow: $vxe-table-fixed-right-scrolling-box-shadow;
     }
   }
   .vxe-table--header-wrapper,
@@ -827,9 +827,6 @@
         background-image: none;
       }
     }
-    // .vxe-tree--btn-wrapper {
-    //   background-color: $vxe-table-background-color;
-    // }
   }
   .vxe-tree--line-wrapper {
     position: relative;
diff --git a/styles/toolbar.scss b/styles/toolbar.scss
index 44f32832a..265163b60 100644
--- a/styles/toolbar.scss
+++ b/styles/toolbar.scss
@@ -61,6 +61,7 @@
     & > .vxe-button {
       display: flex;
       align-items: center;
+      justify-content: center;
     }
   }
   .vxe-tools--wrapper,
diff --git a/styles/variable.scss b/styles/variable.scss
index 2345627d8..fb3c809e0 100644
--- a/styles/variable.scss
+++ b/styles/variable.scss
@@ -33,15 +33,16 @@ $vxe-table-popup-border-color: #DADCE0;
 
 /*table*/
 $vxe-table-font-color: $vxe-font-color;
+$vxe-table-header-font-color: $vxe-font-color;
+$vxe-table-footer-font-color: $vxe-font-color;
 $vxe-table-border-radius: $vxe-border-radius;
 $vxe-table-border-width: 1px;
 $vxe-table-border-color: #e8eaec;
 $vxe-table-resizable-line-color: #D9DDDF;
 $vxe-table-resizable-drag-line-color: $vxe-primary-color;
-$vxe-table-background-color: #ffffff;
 $vxe-table-header-background-color: #f8f8f9;
-$vxe-table-body-background-color: $vxe-table-background-color;
-$vxe-table-footer-background-color: $vxe-table-background-color;
+$vxe-table-body-background-color: #ffffff;
+$vxe-table-footer-background-color: #ffffff;
 $vxe-table-tree-node-line-color:#909399;
 $vxe-table-tree-node-line-style: dotted;
 $vxe-table-header-font-weight: 700;
@@ -54,10 +55,10 @@ $vxe-table-row-line-height: 24px;
 $vxe-table-row-hover-background-color: #f5f7fa;
 $vxe-table-row-striped-background-color: #fafafa;
 $vxe-table-row-hover-striped-background-color: #f5f7fa;
-$vxe-table-row-radio-background-color: #fff3e0;
-$vxe-table-row-hover-radio-background-color: #ffebbc;
-$vxe-table-row-checked-background-color: #fff3e0;
-$vxe-table-row-hover-checked-background-color: #ffebbc;
+$vxe-table-row-radio-checked-background-color: #fff3e0;
+$vxe-table-row-hover-radio-checked-background-color: #ffebbc;
+$vxe-table-row-checkbox-checked-background-color: #fff3e0;
+$vxe-table-row-hover-checkbox-checked-background-color: #ffebbc;
 $vxe-table-row-current-background-color: #e6f7ff;
 $vxe-table-row-hover-current-background-color: #d7effb;
 
@@ -92,6 +93,9 @@ $vxe-table-checkbox-range-border-width: 1px;
 $vxe-table-checkbox-range-border-color: #006af1;
 $vxe-table-checkbox-range-background-color: rgba(50,128,252,0.2);
 
+$vxe-table-fixed-left-scrolling-box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12);
+$vxe-table-fixed-right-scrolling-box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12);
+
 /*filter*/
 $vxe-table-filter-panel-background-color: #fff;
 
@@ -129,6 +133,7 @@ $vxe-tooltip-validate-error-background-color: #f56c6c;
 
 /*pager*/
 $vxe-pager-background-color: #fff;
+$vxe-pager-perfect-background-color: #fff;
 $vxe-pager-perfect-button-background-color: #f4f4f5;
 
 /*modal*/
@@ -160,10 +165,12 @@ $vxe-radio-border-width: $vxe-checkbox-border-width;
 $vxe-radio-icon-background-color: #fff;
 $vxe-radio-checked-icon-background-color: #fff;
 $vxe-radio-indeterminate-icon-background-color: #fff;
+$vxe-radio-button-default-background-color: #fff;
 
 /*button*/
 $vxe-button-max-width: 500px;
 $vxe-button-default-background-color: #fff;
+$vxe-button-dropdown-panel-background-color: #fff;
 $vxe-button-height-default: 34px;
 $vxe-button-height-medium: 32px;
 $vxe-button-height-small: 30px;
@@ -175,7 +182,6 @@ $vxe-input-panel-background-color: $vxe-input-background-color;
 $vxe-input-date-festival-color: #999999;
 $vxe-input-date-festival-important-color: $vxe-primary-color;
 $vxe-input-date-notice-background-color: #FF0000;
-$vxe-input-date-header-background-color: #f8f8f9;
 $vxe-input-date-picker-hover-background-color: #f2f6fc;
 $vxe-input-date-picker-selected-color: #fff;
 $vxe-input-date-time-confirm-button-color: #fff;
@@ -231,6 +237,9 @@ $vxe-optgroup-title-color:#909399;
 /*switch*/
 $vxe-switch-font-color: #fff;
 $vxe-switch-icon-background-color: #fff;
+$vxe-switch-open-background-color: $vxe-primary-color;
+$vxe-switch-close-background-color: rgba(0,0,0,0.35);
+$vxe-switch-disabled-background-color: rgba(0,0,0,0.15);
 
 /*pulldown*/
 $vxe-pulldown-panel-background-color: #fff;