调整表格样式及类型

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.6.0-beta.5",
+  "version": "4.6.0-beta.7",
   "description": "一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/table/src/cell.ts

@@ -509,7 +509,8 @@ export const Cell = {
         class: ['vxe-cell--checkbox', {
           'is--checked': isChecked,
           'is--disabled': isDisabled,
-          'is--indeterminate': indeterminate
+          'is--indeterminate': indeterminate,
+          'is--hidden': !isVisible
         }],
         ...ons
       }, checkVNs)
@@ -577,7 +578,8 @@ export const Cell = {
         class: ['vxe-cell--checkbox', {
           'is--checked': isChecked,
           'is--disabled': isDisabled,
-          'is--indeterminate': indeterminateField && !isChecked ? row[indeterminateField] : isIndeterminate
+          'is--indeterminate': indeterminateField && !isChecked ? row[indeterminateField] : isIndeterminate,
+          'is--hidden': !isVisible
         }],
         ...ons
       }, checkVNs)

styles/base/checked.scss

@@ -1,75 +0,0 @@
-%XECheckboxIcon {
-  .vxe-checkbox--icon {
-    font-size: 1.34em;
-  }
-  .vxe-checkbox--icon {
-    color: var(--vxe-input-border-color);
-    vertical-align: middle;
-    font-weight: 700;
-    user-select: none;
-  }
-  &.is--checked,
-  &.is--indeterminate {
-    color: var(--vxe-primary-color);
-    .vxe-checkbox--icon {
-      color: var(--vxe-primary-color);
-    }
-  }
-  &:not(.is--disabled) {
-    cursor: pointer;
-    &:hover {
-      .vxe-checkbox--icon {
-        color: var(--vxe-primary-color);
-      }
-    }
-  }
-  &.is--disabled {
-    color: var(--vxe-font-disabled-color);
-    cursor: not-allowed;
-    .vxe-checkbox--icon {
-      color: var(--vxe-input-disabled-color);
-    }
-  }
-  .vxe-checkbox--label {
-    padding-left: 0.5em;
-    vertical-align: middle;
-  }
-}
-
-%XERadioIcon {
-  cursor: pointer;
-  .vxe-radio--icon {
-    font-size: 1.4em;
-  }
-  .vxe-radio--icon {
-    color: var(--vxe-input-border-color);
-    vertical-align: middle;
-    font-weight: 700;
-    user-select: none;
-  }
-  &.is--checked {
-    color: var(--vxe-primary-color);
-    .vxe-radio--icon {
-      color: var(--vxe-primary-color);
-    }
-  }
-  &:not(.is--disabled) {
-    cursor: pointer;
-    &:hover {
-      .vxe-radio--icon {
-        color: var(--vxe-primary-color);
-      }
-    }
-  }
-  &.is--disabled {
-    color: var(--vxe-font-disabled-color);
-    cursor: not-allowed;
-    .vxe-radio--icon {
-      color: var(--vxe-input-disabled-color);
-    }
-  }
-  .vxe-radio--label {
-    padding-left: 0.5em;
-    vertical-align: middle;
-  }
-}

styles/checkbox.scss

@@ -1,7 +1,6 @@
 /**Variable**/
 @import './helpers/mixin.scss';
 @import './base/common.scss';
-@import './base/checked.scss';
 
 /*checkbox-group*/
 .vxe-checkbox-group {
@@ -12,7 +11,7 @@
 
 /*checkbox*/
 .vxe-checkbox {
-  @extend %XECheckboxIcon;
+  @include createCheckboxIcon();
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;

styles/export.scss

@@ -1,5 +1,5 @@
 /**Variable**/
-@import './base/checked.scss';
+@import './helpers/mixin.scss';
 
 .vxe-export--panel-column > ul {
   list-style-type: none;
@@ -121,5 +121,5 @@
 }
 
 .vxe-export--panel-column-option {
-  @extend %XECheckboxIcon;
+  @include createCheckboxIcon();
 }

styles/filter.scss

@@ -1,5 +1,5 @@
 /**Variable**/
-@import './base/checked.scss';
+@import './helpers/mixin.scss';
 
 /*筛选*/
 .vxe-cell--filter {
@@ -109,5 +109,5 @@
 }
 
 .vxe-table--filter-option {
-  @extend %XECheckboxIcon;
+  @include createCheckboxIcon();
 }

styles/helpers/mixin.scss

@@ -1,3 +1,82 @@
 @mixin animatTransition ($property, $duration: .1s, $func: ease-in-out) {
   transition: $property $duration $func;
-}
+}
+
+@mixin createCheckboxIcon {
+  .vxe-checkbox--icon {
+    font-size: 1.34em;
+  }
+  .vxe-checkbox--icon {
+    color: var(--vxe-input-border-color);
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
+  }
+  &.is--checked,
+  &.is--indeterminate {
+    color: var(--vxe-primary-color);
+    .vxe-checkbox--icon {
+      color: var(--vxe-primary-color);
+    }
+  }
+  &:not(.is--disabled) {
+    cursor: pointer;
+    &:hover {
+      .vxe-checkbox--icon {
+        color: var(--vxe-primary-color);
+      }
+    }
+  }
+  &.is--hidden {
+    cursor: default;
+  }
+  &.is--disabled {
+    color: var(--vxe-font-disabled-color);
+    cursor: not-allowed;
+    .vxe-checkbox--icon {
+      color: var(--vxe-input-disabled-color);
+    }
+  }
+  .vxe-checkbox--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
+}
+
+@mixin createRadioIcon {
+  cursor: pointer;
+  .vxe-radio--icon {
+    font-size: 1.4em;
+  }
+  .vxe-radio--icon {
+    color: var(--vxe-input-border-color);
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
+  }
+  &.is--checked {
+    color: var(--vxe-primary-color);
+    .vxe-radio--icon {
+      color: var(--vxe-primary-color);
+    }
+  }
+  &:not(.is--disabled) {
+    cursor: pointer;
+    &:hover {
+      .vxe-radio--icon {
+        color: var(--vxe-primary-color);
+      }
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-font-disabled-color);
+    cursor: not-allowed;
+    .vxe-radio--icon {
+      color: var(--vxe-input-disabled-color);
+    }
+  }
+  .vxe-radio--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
+}

styles/radio.scss

@@ -1,7 +1,6 @@
 /**Variable**/
 @import './helpers/mixin.scss';
 @import './base/common.scss';
-@import './base/checked.scss';
 
 /*radio-group*/
 .vxe-radio-group {
@@ -16,7 +15,7 @@
 
 /*radio*/
 .vxe-radio {
-  @extend %XERadioIcon;
+  @include createRadioIcon();
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;

styles/table.scss

@@ -1,6 +1,5 @@
 /**Variable**/
 @import './helpers/mixin.scss';
-@import './base/checked.scss';
 @import './base/common.scss';
 @import './loading.scss';
 
@@ -659,11 +658,6 @@
       }
     }
   }
-  .vxe-body--column {
-    &.col--checkbox {
-      user-select: none;
-    }
-  }
   
   /*边框*/
   .vxe-table--footer-wrapper {
@@ -835,10 +829,10 @@
 
   // 单选框和复选框
   .vxe-cell--radio {
-    @extend %XERadioIcon;
+    @include createRadioIcon();
   }
   .vxe-cell--checkbox {
-    @extend %XECheckboxIcon;
+    @include createCheckboxIcon();
   }
 
   .fixed--hidden {

styles/toolbar.scss

@@ -1,5 +1,5 @@
 /**Variable**/
-@import './base/checked.scss';
+@import './helpers/mixin.scss';
 
 /*toolbar*/
 .vxe-toolbar {
@@ -170,7 +170,7 @@
 }
 
 .vxe-custom--checkbox-option {
-  @extend %XECheckboxIcon;
+  @include createCheckboxIcon();
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

types/loading.d.ts

@@ -1,10 +1,10 @@
 import { VXEComponent } from './component'
 
 /**
- * 表格扩展 - 键盘导航
+ * 组件 - 加载中
  */
 export const VxeLoading: VXEComponent<{[key: string]: any }>
 /**
- * 表格扩展 - 键盘导航
+ * 组件 - 加载中
  */
 export const Loading: VXEComponent<{ [key: string]: any }>