优化表单

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.5.6",
+  "version": "3.5.7-beta.1",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",

packages/all.js

@@ -8,7 +8,6 @@ import { Edit } from './edit'
 import { Export } from './export'
 import { Keyboard } from './keyboard'
 import { Validator } from './validator'
-import { Header } from './header'
 import { Footer } from './footer'
 
 import { Column } from './column'
@@ -43,7 +42,6 @@ import zhCN from './locale/lang/zh-CN'
 // 按需加载的组件
 const components = [
   // 功能模块
-  Header,
   Footer,
   Icon,
   Filter,

packages/edit/src/mixin.js

@@ -473,10 +473,17 @@ export default {
         }
       }
     },
+    _clearActived (evnt) {
+      // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      //   warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit'])
+      // }
+      // 即将废弃
+      return this.clearEdit(evnt)
+    },
     /**
      * 清除激活的编辑
      */
-    _clearActived (evnt) {
+    _clearEdit (evnt) {
       const { editStore } = this
       const { actived } = editStore
       const { row, column } = actived
@@ -498,6 +505,13 @@ export default {
       return VXETable._valid ? this.clearValidate() : this.$nextTick()
     },
     _getActiveRecord () {
+      // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      //   warnLog('vxe.error.delFunc', ['getActiveRecord', 'getEditRecord'])
+      // }
+      // 即将废弃
+      return this.getEditRecord()
+    },
+    _getEditRecord () {
       const { $el, editStore, afterFullData } = this
       const { actived } = editStore
       const { args, row } = actived
@@ -506,11 +520,18 @@ export default {
       }
       return null
     },
+    _isActiveByRow (row) {
+      // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      //   warnLog('vxe.error.delFunc', ['isActiveByRow', 'isEditByRow'])
+      // }
+      // 即将废弃
+      return this.isEditByRow(row)
+    },
     /**
      * 判断行是否为激活编辑状态
      * @param {Row} row 行对象
      */
-    _isActiveByRow (row) {
+    _isEditByRow (row) {
       return this.editStore.actived.row === row
     },
     /**
@@ -549,16 +570,30 @@ export default {
         }
       }
     },
+    _setActiveRow (row) {
+      // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      //   warnLog('vxe.error.delFunc', ['setActiveRow', 'setEditRow'])
+      // }
+      // 即将废弃
+      return this.setEditRow(row)
+    },
     /**
      * 激活行编辑
      */
-    _setActiveRow (row) {
+    _setEditRow (row) {
       return this.setActiveCell(row, XEUtils.find(this.visibleColumn, column => isEnableConf(column.editRender)))
     },
+    _setActiveCell (row) {
+      // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      //   warnLog('vxe.error.delFunc', ['setActiveCell', 'setEditCell'])
+      // }
+      // 即将废弃
+      return this.setEditCell(row)
+    },
     /**
      * 激活单元格编辑
      */
-    _setActiveCell (row, fieldOrColumn) {
+    _setEditCell (row, fieldOrColumn) {
       const { editConfig } = this
       const column = XEUtils.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn
       if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {

packages/form/src/form-gather.js

@@ -6,7 +6,7 @@ export default {
   extends: VxeFormItem,
   provide () {
     return {
-      xeformgather: this
+      $xeformgather: this
     }
   },
   created () {

packages/form/src/form-item.js

@@ -13,6 +13,14 @@ const props = {
   align: String,
   titleAlign: String,
   titleWidth: [String, Number],
+  titleColon: {
+    type: Boolean,
+    default: null
+  },
+  titleAsterisk: {
+    type: Boolean,
+    default: null
+  },
   className: [String, Function],
   titleOverflow: { type: [Boolean, String], default: null },
   titlePrefix: Object,
@@ -133,10 +141,15 @@ export default {
     $xeform: {
       default: null
     },
-    xeformgather: {
+    $xeformgather: {
       default: null
     }
   },
+  provide () {
+    return {
+      $xeformitem: this
+    }
+  },
   data () {
     return {
       itemConfig: null

packages/form/src/form.js

@@ -71,6 +71,8 @@ function renderItems (h, _vm, itemList) {
     const align = item.align || _vm.align
     const titleAlign = item.titleAlign || _vm.titleAlign
     const titleWidth = item.titleWidth || _vm.titleWidth
+    const titleColon = item.titleColon === null ? _vm.titleColon : item.titleColon
+    const titleAsterisk = item.titleAsterisk === null ? _vm.titleAsterisk : item.titleAsterisk
     let itemVisibleMethod = visibleMethod
     const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
     const showEllipsis = itemOverflow === 'ellipsis'
@@ -118,6 +120,8 @@ function renderItems (h, _vm, itemList) {
     return h('div', {
       class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : null, className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
         'is--title': title,
+        'is--colon': titleColon,
+        'is--asterisk': titleAsterisk,
         'is--required': isRequired,
         'is--hidden': folding && collapseAll,
         'is--active': !itemVisibleMethod || itemVisibleMethod(params),
@@ -208,7 +212,9 @@ export default {
   },
   provide () {
     return {
-      $xeform: this
+      $xeform: this,
+      $xeformgather: null,
+      $xeformitem: null
     }
   },
   computed: {
@@ -249,8 +255,6 @@ export default {
     return h('form', {
       class: ['vxe-form', className ? (XEUtils.isFunction(className) ? className({ items: formItems, data, $form: this }) : className) : '', {
         [`size--${vSize}`]: vSize,
-        'is--colon': this.titleColon,
-        'is--asterisk': this.titleAsterisk,
         'is--loading': loading
       }],
       on: {

packages/form/src/util.js

@@ -69,14 +69,14 @@ export function destroyItem (_vm) {
 }
 
 export function assemItem (_vm) {
-  const { $el, $xeform, xeformgather, itemConfig } = _vm
-  const itemGather = xeformgather ? xeformgather.itemConfig : null
+  const { $el, $xeform, $xeformgather, itemConfig } = _vm
+  const itemGather = $xeformgather ? $xeformgather.itemConfig : null
   itemConfig.slots = _vm.$scopedSlots
   if (itemGather) {
     if (!itemGather.children) {
       itemGather.children = []
     }
-    itemGather.children.splice([].indexOf.call(xeformgather.$el.children, $el), 0, itemConfig)
+    itemGather.children.splice([].indexOf.call($xeformgather.$el.children, $el), 0, itemConfig)
   } else {
     $xeform.staticItems.splice([].indexOf.call($xeform.$refs.hideItem.children, $el), 0, itemConfig)
   }

packages/table/src/methods.js

@@ -4644,7 +4644,7 @@ const Methods = {
 }
 
 // Module methods
-const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearActived,getActiveRecord,isActiveByRow,setActiveRow,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,openExport,openPrint,exportData,openImport,importData,saveFile,readFile,importByFile,print'.split(',')
+const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,openExport,openPrint,exportData,openImport,importData,saveFile,readFile,importByFile,print'.split(',')
 
 funcs.forEach(name => {
   Methods[name] = function (...args) {

packages/table/src/table.js

@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VXETable from '../../v-x-e-table'
 import VxeTableBody from './body'
+import VxeTableHeader from '../../header'
 import vSize from '../../mixins/size'
 import { isEnableConf, getFuncText } from '../../tools/utils'
 import { createResizeEvent } from '../../tools/resize'
@@ -24,7 +25,7 @@ function renderFixed (h, $xetable, fixedType) {
     class: `vxe-table--fixed-${fixedType}-wrapper`,
     ref: `${fixedType}Container`
   }, [
-    showHeader ? h('vxe-table-header', {
+    showHeader ? h(VxeTableHeader, {
       props: {
         fixedType,
         tableData,
@@ -1007,7 +1008,7 @@ export default {
           /**
            * 表头
            */
-          showHeader ? h('vxe-table-header', {
+          showHeader ? h(VxeTableHeader, {
             ref: 'tableHeader',
             props: {
               tableData,

styles/button.scss

@@ -272,11 +272,6 @@ $btnThemeList: (
   }
 }
 .vxe-button--loading-icon,
-.vxe-button--icon,
-.vxe-button--content {
-  vertical-align: middle;
-}
-.vxe-button--loading-icon,
 .vxe-button--icon {
   min-width: $vxe-font-size;
   &+.vxe-button--content {

styles/form.scss

@@ -106,22 +106,9 @@
       }
     }
   }
-  &.is--asterisk {
-    .vxe-form--item {
-      &.is--required {
-        .vxe-form--item-title-content {
-          &:before {
-            content: "*";
-            color: $vxe-form-validate-error-color;
-            font-family: Verdana,Arial,Tahoma;
-            margin-right: 0.2em;
-            font-weight: normal;
-            vertical-align: middle;
-          }
-        }
-      }
-    }
-  }
+}
+
+.vxe-form--item {
   &.is--colon {
     .vxe-form--item-title-postfix {
       &:after {
@@ -131,9 +118,20 @@
       }
     }
   }
-}
-
-.vxe-form--item {
+  &.is--asterisk {
+    &.is--required {
+      .vxe-form--item-title-content {
+        &:before {
+          content: "*";
+          color: $vxe-form-validate-error-color;
+          font-family: Verdana,Arial,Tahoma;
+          margin-right: 0.2em;
+          font-weight: normal;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
   &.is--span {
     .vxe-default-input:not([type="submit"]):not([type="reset"]),
     .vxe-default-textarea,

types/all.d.ts

@@ -42,7 +42,6 @@ declare global {
 export * from './v-x-e-table'
 export * from './component'
 
-export * from './header'
 export * from './footer'
 export * from './icon'
 export * from './filter'