优化表单

package.json

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

packages/all.ts

@@ -9,7 +9,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'
@@ -44,7 +43,6 @@ import zhCN from './locale/lang/zh-CN'
 // 按需加载的组件
 const components = [
   // 功能模块
-  Header,
   Footer,
   Icon,
   Filter,

packages/edit/src/hook.ts

@@ -440,6 +440,9 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
         return []
       },
       getActiveRecord () {
+        return this.getEditRecord()
+      },
+      getEditRecord () {
         const { editStore } = reactData
         const { afterFullData } = internalData
         const el = refElem.value
@@ -460,10 +463,17 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
         }
         return null
       },
+      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 } = reactData
         const { actived } = editStore
         const { row, column } = actived
@@ -495,25 +505,46 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
         removeCellSelectedClass()
         return nextTick()
       },
+      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) {
         const { editStore } = reactData
         return editStore.actived.row === row
       },
+      setActiveRow (row) {
+        // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        //   warnLog('vxe.error.delFunc', ['setActiveRow', 'setEditRow'])
+        // }
+        // 即将废弃
+        return editMethods.setEditRow(row)
+      },
       /**
        * 激活行编辑
        */
-      setActiveRow (row) {
+      setEditRow (row) {
         const { visibleColumn } = internalData
         return $xetable.setActiveCell(row, XEUtils.find(visibleColumn, column => isEnableConf(column.editRender)))
       },
+      setActiveCell (row, fieldOrColumn) {
+        // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        //   warnLog('vxe.error.delFunc', ['setActiveCell', 'setEditCell'])
+        // }
+        // 即将废弃
+        return editMethods.setEditCell(row, fieldOrColumn)
+      },
       /**
        * 激活单元格编辑
        */
-      setActiveCell (row, fieldOrColumn) {
+      setEditCell (row, fieldOrColumn) {
         const { editConfig } = props
         const column = XEUtils.isString(fieldOrColumn) ? $xetable.getColumnByField(fieldOrColumn) : fieldOrColumn
         if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {

packages/form/src/form-gather.ts

@@ -11,13 +11,13 @@ export default defineComponent({
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
     const $xeform = inject('$xeform', {} as VxeFormConstructor & VxeFormPrivateMethods)
-    const formGather = inject('xeformgather', null as XEFormItemProvide | null)
+    const formGather = inject('$xeformgather', null as XEFormItemProvide | null)
     const defaultSlot = slots.default
     const formItem = reactive(createItem($xeform, props))
     const xeformitem: XEFormItemProvide = { formItem }
     formItem.children = []
 
-    provide('xeformgather', xeformitem)
+    provide('$xeformgather', xeformitem)
 
     watchItem(props, formItem)
 
@@ -43,6 +43,14 @@ export default defineComponent({
       }, defaultSlot ? defaultSlot() : [])
     }
 
-    return renderVN
+    const $xeformgather = {
+      itemConfig: formItem,
+      renderVN
+    }
+
+    return $xeformgather
+  },
+  render () {
+    return this.renderVN()
   }
 })

packages/form/src/form-item.ts

@@ -15,6 +15,14 @@ export const formItemProps = {
   align: String as PropType<VxeFormItemPropTypes.Align>,
   titleAlign: String as PropType<VxeFormItemPropTypes.TitleAlign>,
   titleWidth: [String, Number] as PropType<VxeFormItemPropTypes.TitleWidth>,
+  titleColon: {
+    type: Boolean as PropType<VxeFormItemPropTypes.TitleColon>,
+    default: null
+  },
+  titleAsterisk: {
+    type: Boolean as PropType<VxeFormItemPropTypes.TitleAsterisk>,
+    default: null
+  },
   className: [String, Function] as PropType<VxeFormItemPropTypes.ClassName>,
   titleOverflow: { type: [Boolean, String] as PropType<VxeFormItemPropTypes.TitleOverflow>, default: null },
   titlePrefix: Object as PropType<VxeFormItemPropTypes.TitlePrefix>,
@@ -33,7 +41,7 @@ export default defineComponent({
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
     const $xeform = inject('$xeform', {} as VxeFormConstructor & VxeFormPrivateMethods)
-    const formGather = inject('xeformgather', null as XEFormItemProvide | null)
+    const formGather = inject('$xeformgather', null as XEFormItemProvide | null)
     const formItem = createItem($xeform, props)
     formItem.slots = slots
 
@@ -154,6 +162,14 @@ export default defineComponent({
       })
     }
 
-    return renderVN
+    const $xeformitem = {
+      itemConfig: formItem,
+      renderVN
+    }
+
+    return $xeformitem
+  },
+  render () {
+    return this.renderVN()
   }
 })

packages/form/src/form.ts

@@ -526,6 +526,8 @@ export default defineComponent({
         const align = item.align || props.align
         const titleAlign = item.titleAlign || props.titleAlign
         const titleWidth = item.titleWidth || props.titleWidth
+        const titleColon = item.titleColon === null ? props.titleColon : item.titleColon
+        const titleAsterisk = item.titleAsterisk === null ? props.titleAsterisk : item.titleAsterisk
         const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
         const showEllipsis = itemOverflow === 'ellipsis'
         const showTitle = itemOverflow === 'title'
@@ -596,11 +598,14 @@ export default defineComponent({
         return h('div', {
           class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : '', 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),
             'is--error': showError
           }],
+          itemConfig: item,
           key: item.id
         }, [
           h('div', {
@@ -672,7 +677,7 @@ export default defineComponent({
     })
 
     const renderVN = () => {
-      const { loading, className, data, titleColon, titleAsterisk, customLayout } = props
+      const { loading, className, data, customLayout } = props
       const { formItems } = reactData
       // const formItems: any[] = []
       const vSize = computeSize.value
@@ -682,8 +687,6 @@ export default defineComponent({
         ref: refElem,
         class: ['vxe-form', className ? (XEUtils.isFunction(className) ? className({ items: formItems, data, $form: $xeform }) : className) : '', {
           [`size--${vSize}`]: vSize,
-          'is--colon': titleColon,
-          'is--asterisk': titleAsterisk,
           'is--loading': loading
         }],
         onSubmit: submitEvent,
@@ -718,6 +721,8 @@ export default defineComponent({
     $xeform.renderVN = renderVN
 
     provide('$xeform', $xeform)
+    provide('$xeformgather', null)
+    provide('$xeformitem', null)
 
     return $xeform
   },

packages/form/src/itemInfo.ts

@@ -10,6 +10,8 @@ export class ItemInfo {
       align: item.align,
       titleAlign: item.titleAlign,
       titleWidth: item.titleWidth,
+      titleColon: item.titleColon,
+      titleAsterisk: item.titleAsterisk,
       titlePrefix: item.titlePrefix,
       titleSuffix: item.titleSuffix,
       titleOverflow: item.titleOverflow,

packages/table/src/table.ts

@@ -10,6 +10,7 @@ import { VXETable } from '../../v-x-e-table'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import Cell from './cell'
 import TableBodyComponent from './body'
+import TableHeaderComponent from '../../header'
 import tableProps from './props'
 import tableEmits from './emits'
 import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
@@ -5569,7 +5570,7 @@ export default defineComponent({
         ref: isFixedLeft ? refLeftContainer : refRightContainer,
         class: `vxe-table--fixed-${fixedType}-wrapper`
       }, [
-        showHeader ? h(resolveComponent('vxe-table-header') as ComponentOptions, {
+        showHeader ? h(TableHeaderComponent, {
           ref: isFixedLeft ? refTableLeftHeader : refTableRightHeader,
           fixedType,
           tableData,
@@ -5963,7 +5964,7 @@ export default defineComponent({
             /**
              * 表头
              */
-            showHeader ? h(resolveComponent('vxe-table-header') as ComponentOptions, {
+            showHeader ? h(TableHeaderComponent, {
               ref: refTableHeader,
               tableData,
               tableColumn,

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

@@ -14,7 +14,6 @@ export * from './v-x-e-table'
 export * from './component'
 
 // Module
-export * from './header'
 export * from './footer'
 export * from './icon'
 export * from './filter'

types/edit.d.ts

@@ -60,7 +60,8 @@ export interface TableEditMethods {
    */
   getUpdateRecords(): any[]
   /**
-   * 用于 edit-config，获取已激活的行数据
+   * 请使用 getEditRecord
+   * @deprecated
    */
   getActiveRecord(): {
     row: any
@@ -71,6 +72,18 @@ export interface TableEditMethods {
     $columnIndex: number
     cell: HTMLElement
   }
+  /**
+   * 用于 edit-config，获取已激活的行数据
+   */
+  getEditRecord(): {
+    row: any
+    rowIndex: number
+    $rowIndex: number
+    column: VxeTableDefines.ColumnInfo
+    columnIndex: number
+    $columnIndex: number
+    cell: HTMLElement
+  }
   /**
    * 用于 mouse-config.selected，获取选中的单元格信息
    */
@@ -79,29 +92,49 @@ export interface TableEditMethods {
     column: VxeTableDefines.ColumnInfo
   }
   /**
-   * 手动清除单元格激活状态
+   * 请使用 clearEdit
+   * @deprecated
    */
   clearActived(evnt?: Event): Promise<any>
+  /**
+   * 手动清除单元格激活状态
+   */
+  clearEdit(evnt?: Event): Promise<any>
   /**
    * 手动清除单元格选中状态
    */
   clearSelected(): Promise<any>
+  /**
+   * 请使用 isEditByRow
+   * @deprecated
+   */
+  isActiveByRow(row: any): boolean
   /**
    * 用于 edit-config，判断行是否为激活编辑状态
    * @param row 指定行
    */
-  isActiveByRow(row: any): boolean
+  isEditByRow(row: any): boolean
+  /**
+   * 请使用 setEditRow
+   * @deprecated
+   */
+  setActiveRow(row: any): Promise<any>
   /**
    * 用于 edit-config，激活行编辑并激活第一个单元格
    * @param row 指定行
    */
-  setActiveRow(row: any): Promise<any>
+  setEditRow(row: any): Promise<any>
+  /**
+   * 请使用 setEditCell
+   * @deprecated
+   */
+  setActiveCell(row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo): Promise<any>
   /**
    * 用于 edit-config，激活单元格编辑
    * @param row 指定行
    * @param field 字段名
    */
-  setActiveCell(row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo): Promise<any>
+  setEditCell(row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo): Promise<any>
   /**
    * 用于 mouse-config.mouse-config，选中某个单元格
    * @param row 指定行

types/form-item.d.ts

@@ -35,6 +35,14 @@ export interface VxeFormItemProps {
    * 标题宽度
    */
   titleWidth?: VxeFormItemPropTypes.TitleWidth
+  /**
+   * 是否显示标题冒号
+   */
+  titleColon?: VxeFormItemPropTypes.TitleColon
+  /**
+   * 是否显示必填字段的红色星号
+   */
+  titleAsterisk?: VxeFormItemPropTypes.TitleAsterisk
   /**
    * 给表单项附加 className
    */
@@ -83,6 +91,8 @@ export namespace VxeFormItemPropTypes {
   export type Align = VxeFormPropTypes.Align
   export type TitleAlign = VxeFormPropTypes.TitleAlign
   export type TitleWidth = VxeFormPropTypes.TitleWidth
+  export type TitleColon = VxeFormPropTypes.TitleColon
+  export type TitleAsterisk = VxeFormPropTypes.TitleAsterisk
 
   interface ClassNameParams {
     $form: VxeFormConstructor

types/form.d.ts

@@ -194,6 +194,8 @@ export namespace VxeFormDefines {
     align: VxeFormItemPropTypes.Align
     titleAlign: VxeFormItemPropTypes.TitleAlign
     titleWidth: VxeFormItemPropTypes.TitleWidth
+    titleColon: VxeFormItemPropTypes.TitleColon
+    titleAsterisk: VxeFormItemPropTypes.TitleAsterisk
     titlePrefix: VxeFormItemPropTypes.TitlePrefix
     titleSuffix: VxeFormItemPropTypes.TitleSuffix
     titleOverflow: VxeFormItemPropTypes.TitleOverflow