vxe-table 3.6.14-beta.2 → 3.6.14-beta.3

package/package.json

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

package/packages/form/src/form-config-item.js

@@ -28,12 +28,14 @@ const VxeFormConfigItem = {
   render (h) {
     const { _e, $xeform, itemConfig: item } = this
     const { rules, data, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow } = $xeform
-    const { slots, title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, children } = item
+    const { slots, title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
     const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
     const itemClassName = compConf ? compConf.itemClassName : ''
     const itemStyle = compConf ? compConf.itemStyle : null
     const itemContentClassName = compConf ? compConf.itemContentClassName : ''
     const itemContentStyle = compConf ? compConf.itemContentStyle : null
+    const itemTitleClassName = compConf ? compConf.itemTitleClassName : ''
+    const itemTitleStyle = compConf ? compConf.itemTitleStyle : null
     const span = item.span || $xeform.span
     const align = item.align || $xeform.align
     const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign
@@ -41,10 +43,10 @@ const VxeFormConfigItem = {
     const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon
     const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk
     const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
-    const showEllipsis = itemOverflow === 'ellipsis'
-    const showTitle = itemOverflow === 'title'
-    const showTooltip = itemOverflow === true || itemOverflow === 'tooltip'
-    const hasEllipsis = showTitle || showTooltip || showEllipsis
+    const ovEllipsis = itemOverflow === 'ellipsis'
+    const ovTitle = itemOverflow === 'title'
+    const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip'
+    const hasEllipsis = ovTitle || ovTooltip || ovEllipsis
     const params = { data, field, property: field, item, $form: $xeform, $grid: $xeform.xegrid }
     let isRequired
     if (visible === false) {
@@ -81,7 +83,7 @@ const VxeFormConfigItem = {
     } else if (field) {
       contentVNs = [XEUtils.toValueString(XEUtils.get(data, field))]
     }
-    const ons = showTooltip ? {
+    const ons = ovTooltip ? {
       mouseenter (evnt) {
         $xeform.triggerTitleTipEvent(evnt, params)
       },
@@ -109,21 +111,36 @@ const VxeFormConfigItem = {
       h('div', {
         class: 'vxe-form--item-inner'
       }, [
-        title || (slots && slots.title) ? h('div', {
-          class: ['vxe-form--item-title', titleAlign ? `align--${titleAlign}` : null, {
-            'is--ellipsis': hasEllipsis
-          }],
-          style: titleWidth ? {
-            width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
-          } : null,
+        (showTitle !== false) && (title || (slots && slots.title)) ? h('div', {
+          class: [
+            'vxe-form--item-title',
+            titleAlign ? `align--${titleAlign}` : '',
+            hasEllipsis ? 'is--ellipsis' : '',
+            itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
+            titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
+          ],
+
+          style: Object.assign(
+            {},
+            XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle,
+            XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle,
+            titleWidth ? {
+              width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
+            } : null
+          ),
           attrs: {
-            title: showTitle ? getFuncText(title) : null
+            title: ovTitle ? getFuncText(title) : null
           },
           on: ons
         }, renderTitle(h, $xeform, item)) : null,
         h('div', {
-          class: ['vxe-form--item-content', align ? `align--${align}` : '', itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : ''],
-          style: XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle
+          class: [
+            'vxe-form--item-content',
+            align ? `align--${align}` : '',
+            itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
+            contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
+          ],
+          style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
         }, contentVNs.concat(
           [
             collapseNode ? h('div', {

package/packages/form/src/form-item.js

@@ -28,7 +28,15 @@ const props = {
     type: Boolean,
     default: null
   },
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
   className: [String, Function],
+  contentClassName: [String, Function],
+  contentStyle: [Object, Function],
+  titleClassName: [String, Function],
+  titleStyle: [Object, Function],
   titleOverflow: {
     type: [Boolean, String],
     default: null
@@ -52,12 +60,14 @@ Object.keys(props).forEach(name => {
 
 const renderItem = (h, _vm, item, slots) => {
   const { _e, rules, data, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow } = _vm
-  const { title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow } = item
+  const { title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
   const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
   const itemClassName = compConf ? compConf.itemClassName : ''
   const itemStyle = compConf ? compConf.itemStyle : null
   const itemContentClassName = compConf ? compConf.itemContentClassName : ''
   const itemContentStyle = compConf ? compConf.itemContentStyle : null
+  const itemTitleClassName = compConf ? compConf.itemTitleClassName : ''
+  const itemTitleStyle = compConf ? compConf.itemTitleStyle : null
   const span = item.span || _vm.span
   const align = item.align || _vm.align
   const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign
@@ -65,10 +75,10 @@ const renderItem = (h, _vm, item, slots) => {
   const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon
   const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk
   const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
-  const showEllipsis = itemOverflow === 'ellipsis'
-  const showTitle = itemOverflow === 'title'
-  const showTooltip = itemOverflow === true || itemOverflow === 'tooltip'
-  const hasEllipsis = showTitle || showTooltip || showEllipsis
+  const ovEllipsis = itemOverflow === 'ellipsis'
+  const ovTitle = itemOverflow === 'title'
+  const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip'
+  const hasEllipsis = ovTitle || ovTooltip || ovEllipsis
   const params = { data, field, property: field, item, $form: _vm, $grid: _vm.xegrid }
   let isRequired
   if (visible === false) {
@@ -90,7 +100,7 @@ const renderItem = (h, _vm, item, slots) => {
   } else if (field) {
     contentVNs = [`${XEUtils.get(data, field)}`]
   }
-  const ons = showTooltip ? {
+  const ons = ovTooltip ? {
     mouseenter (evnt) {
       _vm.triggerTitleTipEvent(evnt, params)
     },
@@ -118,21 +128,35 @@ const renderItem = (h, _vm, item, slots) => {
     h('div', {
       class: 'vxe-form--item-inner'
     }, [
-      title || (slots && slots.title) ? h('div', {
-        class: ['vxe-form--item-title', titleAlign ? `align--${titleAlign}` : null, {
-          'is--ellipsis': hasEllipsis
-        }],
-        style: titleWidth ? {
-          width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
-        } : null,
+      (showTitle !== false) && (title || (slots && slots.title)) ? h('div', {
+        class: [
+          'vxe-form--item-title',
+          titleAlign ? `align--${titleAlign}` : '',
+          hasEllipsis ? 'is--ellipsis' : '',
+          itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
+          titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
+        ],
+        style: Object.assign(
+          {},
+          XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle,
+          XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle,
+          titleWidth ? {
+            width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
+          } : null
+        ),
         attrs: {
-          title: showTitle ? getFuncText(title) : null
+          title: ovTitle ? getFuncText(title) : null
         },
         on: ons
       }, renderTitle(h, _vm, item)) : null,
       h('div', {
-        class: ['vxe-form--item-content', align ? `align--${align}` : '', itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : ''],
-        style: XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle
+        class: [
+          'vxe-form--item-content',
+          align ? `align--${align}` : '',
+          itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
+          contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
+        ],
+        style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
       }, contentVNs.concat(
         [
           collapseNode ? h('div', {

package/packages/form/src/util.js

@@ -18,12 +18,17 @@ class ItemConfig {
       titlePrefix: item.titlePrefix,
       titleSuffix: item.titleSuffix,
       titleOverflow: item.titleOverflow,
+      showTitle: item.showTitle,
       resetValue: item.resetValue,
       visible: item.visible,
       visibleMethod: item.visibleMethod,
       folding: item.folding,
       collapseNode: item.collapseNode,
       className: item.className,
+      contentClassName: item.className,
+      contentStyle: item.contentStyle,
+      titleClassName: item.titleClassName,
+      titleStyle: item.titleStyle,
       itemRender: item.itemRender,
       // 渲染属性
       showError: false,

package/styles/form.scss

@@ -93,14 +93,22 @@
 
 .vxe-form {
   .vxe-form--gather {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+  }
+  .vxe-form--wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
   }
   .vxe-form--item {
     display: none;
     padding: 0.5em 0.8em 0.5em 0;
     &.is--active {
       &:not(.is--hidden) {
-        display: inline-block;
+        display: inline-flex;
       }
     }
   }
@@ -169,6 +177,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex-grow: 1;
     .vxe-form--item-title {
       flex-shrink: 0;
     }

package/types/component.d.ts

@@ -23,4 +23,7 @@ export interface RowInfo {
   [key: string]: any;
 }
 
+export type VNodeStyle = Record<string, string | number>
+export type VNodeClassName = Record<string, boolean>
+
 export type SlotVNodeType = VNode | string | number

package/types/form-item.d.ts

@@ -38,6 +38,7 @@ export class FormItem extends VXETableComponent {
    * 后缀配置项
    */
   titleSuffix?: FormItemTitleOptions;
+  showTitle?: boolean
   /**
    * 重置时的默认值
    */
@@ -93,6 +94,7 @@ export interface FormItemOptions {
    * 后缀配置项
    */
   titleSuffix?: FormItemTitleOptions;
+  showTitle?: boolean
   /**
    * 重置时的默认值
    */

package/types/v-x-e-table/renderer.d.ts

@@ -1,5 +1,5 @@
 import { CreateElement } from 'vue'
-import { SlotVNodeType, RowInfo, VNodeStyle } from '../component'
+import { SlotVNodeType, RowInfo, VNodeStyle, VNodeClassName } from '../component'
 import { Table } from '../table'
 import { Grid } from '../grid'
 import { ColumnInfo, ColumnCellRenderOptions, ColumnContentRenderOptions } from '../column'
@@ -33,7 +33,7 @@ export interface RendererMapOptions {
   isFooter?: boolean;
 
   // 筛选渲染
-  filterClassName?: string | ((params: ColumnFilterRenderParams) => string | { [key: string]: boolean })
+  filterClassName?: string | ((params: ColumnFilterRenderParams) => string | VNodeClassName)
   showFilterFooter?: boolean;
   renderFilter?(h: CreateElement, renderOpts: ColumnFilterRenderOptions, params: ColumnFilterRenderParams): SlotVNodeType | SlotVNodeType[];
   filterMethod?(params: ColumnFilterMethodParams): boolean;
@@ -42,8 +42,8 @@ export interface RendererMapOptions {
   defaultFilterMethod?(params: ColumnFilterMethodParams): boolean;
 
   // 单元格渲染
-  cellClassName?: string | ((params: ColumnCellRenderParams | ColumnEditRenderParams) => string | { [key: string]: boolean })
-  cellStyle?: string | VNodeStyle | ((params: ColumnCellRenderParams | ColumnEditRenderParams) => string | VNodeStyle)
+  cellClassName?: string | ((params: ColumnCellRenderParams | ColumnEditRenderParams) => string | VNodeClassName)
+  cellStyle?:  VNodeStyle | ((params: ColumnCellRenderParams | ColumnEditRenderParams) => VNodeStyle)
   renderHeader?(h: CreateElement, renderOpts: ColumnCellRenderOptions | ColumnEditRenderOptions, params: ColumnCellRenderParams | ColumnEditRenderParams): SlotVNodeType | SlotVNodeType[];
   renderDefault?(h: CreateElement, renderOpts: ColumnCellRenderOptions | ColumnEditRenderOptions, params: ColumnCellRenderParams | ColumnEditRenderParams): SlotVNodeType | SlotVNodeType[];
   renderFooter?(h: CreateElement, renderOpts: ColumnCellRenderOptions | ColumnEditRenderOptions, params: ColumnFooterRenderParams): SlotVNodeType | SlotVNodeType[];
@@ -63,10 +63,12 @@ export interface RendererMapOptions {
   renderToolbarTool?(h: CreateElement, renderOpts: ToolbarToolRenderOptions, params: ToolbarToolRenderParams): SlotVNodeType | SlotVNodeType[];
 
   // 表单-项渲染
-  itemClassName?: string | ((params: FormItemRenderParams) => string | { [key: string]: boolean })
-  itemStyle?: string | VNodeStyle | ((params: FormItemRenderParams) => string | VNodeStyle)
-  itemContentClassName?: string | ((params: FormItemRenderParams) => string | { [key: string]: boolean })
-  itemContentStyle?: string | VNodeStyle | ((params: FormItemRenderParams) => string | VNodeStyle)
+  itemClassName?: string | ((params: FormItemRenderParams) => string | VNodeClassName)
+  itemStyle?: VNodeStyle | ((params: FormItemRenderParams) => VNodeStyle)
+  itemContentClassName?: string | ((params: FormItemRenderParams) => string | VNodeClassName)
+  itemContentStyle?: VNodeStyle | ((params: FormItemRenderParams) => VNodeStyle)
+  itemTitleClassName?: string | ((params: FormItemRenderParams) => string | VNodeClassName)
+  itemTitleStyle?: VNodeStyle | ((params: FormItemRenderParams) => VNodeStyle)
   renderItemTitle?(h: CreateElement, renderOpts: FormItemRenderOptions, params: FormItemRenderParams): SlotVNodeType | SlotVNodeType[];
   renderItemContent?(h: CreateElement, renderOpts: FormItemRenderOptions, params: FormItemRenderParams): SlotVNodeType | SlotVNodeType[];
   itemVisibleMethod?(params: FormItemVisibleParams): boolean;