vxe-table 3.7.0-beta.9 → 3.7.0

package/packages/edit/src/mixin.js

@@ -7,7 +7,8 @@ import { warnLog, errLog, getLog } from '../../tools/log'
 
 function insertTreeRow (_vm, newRecords, isAppend) {
   const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm
-  const { rowField, parentField, childrenField, children, mapChildrenField } = treeOpts
+  const { rowField, parentField, mapChildrenField } = treeOpts
+  const childrenField = treeOpts.children || treeOpts.childrenField
   const funcName = isAppend ? 'push' : 'unshift'
   newRecords.forEach(item => {
     const parentRowId = item[parentField]
@@ -17,11 +18,16 @@ function insertTreeRow (_vm, newRecords, isAppend) {
       const { item: parentRow } = matchObj
       const parentRest = fullAllDataRowIdData[getRowid(_vm, parentRow)]
       const parentLevel = parentRest ? parentRest.level : 0
-      let parentChilds = parentRow[childrenField || children]
+      let parentChilds = parentRow[childrenField]
+      let mapChilds = parentRow[mapChildrenField]
       if (!XEUtils.isArray(parentChilds)) {
-        parentChilds = parentRow[childrenField || children] = []
+        parentChilds = parentRow[childrenField] = []
+      }
+      if (!XEUtils.isArray(mapChilds)) {
+        mapChilds = parentRow[childrenField] = []
       }
       parentChilds[funcName](item)
+      mapChilds[funcName](item)
       const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: parentChilds, parent, level: parentLevel + 1 }
       fullDataRowIdData[rowid] = rest
       fullAllDataRowIdData[rowid] = rest
@@ -40,6 +46,156 @@ function insertTreeRow (_vm, newRecords, isAppend) {
   })
 }
 
+function handleInsertRowAt (_vm, records, row, isInsertNextRow) {
+  const { tableFullTreeData, mergeList, afterFullData, editStore, tableFullData, treeConfig, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm
+  const { transform, rowField, mapChildrenField } = treeOpts
+  const childrenField = treeOpts.children || treeOpts.childrenField
+  if (!XEUtils.isArray(records)) {
+    records = [records]
+  }
+  const newRecords = _vm.defineField(records.map(record => Object.assign(treeConfig && transform ? { [mapChildrenField]: [], [childrenField]: [] } : {}, record)))
+  if (!row) {
+  // 如果为虚拟树
+    if (treeConfig && transform) {
+      insertTreeRow(_vm, newRecords, false)
+    } else {
+      afterFullData.unshift(...newRecords)
+      tableFullData.unshift(...newRecords)
+      // 刷新单元格合并
+      mergeList.forEach(mergeItem => {
+        const { row: mergeRowIndex } = mergeItem
+        if (mergeRowIndex > 0) {
+          mergeItem.row = mergeRowIndex + newRecords.length
+        }
+      })
+    }
+  } else {
+    if (row === -1) {
+      // 如果为虚拟树
+      if (treeConfig && transform) {
+        insertTreeRow(_vm, newRecords, true)
+      } else {
+        afterFullData.push(...newRecords)
+        tableFullData.push(...newRecords)
+        // 刷新单元格合并
+        mergeList.forEach(mergeItem => {
+          const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
+          if (mergeRowIndex + mergeRowspan > afterFullData.length) {
+            mergeItem.rowspan = mergeRowspan + newRecords.length
+          }
+        })
+      }
+    } else {
+      // 如果为虚拟树
+      if (treeConfig && transform) {
+        const matchMapObj = XEUtils.findTree(tableFullTreeData, item => row[rowField] === item[rowField], { children: mapChildrenField })
+        if (matchMapObj) {
+          const { parent: parentRow } = matchMapObj
+          const parentMapChilds = parentRow ? parentRow[mapChildrenField] : tableFullTreeData
+          const parentRest = fullAllDataRowIdData[getRowid(_vm, parentRow)]
+          const parentLevel = parentRest ? parentRest.level : 0
+          newRecords.forEach((item, i) => {
+            const rowid = getRowid(_vm, item)
+            if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+              if (item[treeOpts.parentField]) {
+                if (parentRow && item[treeOpts.parentField] !== parentRow[rowField]) {
+                  errLog('vxe.error.errProp', [`${treeOpts.parentField}=${item[treeOpts.parentField]}`, `${treeOpts.parentField}=${parentRow[rowField]}`])
+                }
+              }
+            }
+            if (parentRow) {
+              item[treeOpts.parentField] = parentRow[rowField]
+            }
+            let targetIndex = matchMapObj.index + i
+            if (isInsertNextRow) {
+              targetIndex = targetIndex + 1
+            }
+            parentMapChilds.splice(targetIndex, 0, item)
+            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1 }
+            fullDataRowIdData[rowid] = rest
+            fullAllDataRowIdData[rowid] = rest
+          })
+
+          // 源
+          if (parentRow) {
+            const matchObj = XEUtils.findTree(tableFullTreeData, item => row[rowField] === item[rowField], { children: childrenField })
+            if (matchObj) {
+              const parentChilds = matchObj.items
+              let targetIndex = matchObj.index
+              if (isInsertNextRow) {
+                targetIndex = targetIndex + 1
+              }
+              parentChilds.splice(targetIndex, 0, ...newRecords)
+            }
+          }
+        } else {
+          if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+            warnLog('vxe.error.unableInsert')
+          }
+          insertTreeRow(_vm, newRecords, true)
+        }
+      } else {
+        if (treeConfig) {
+          throw new Error(getLog('vxe.error.noTree', ['insert']))
+        }
+        let afIndex = -1
+        // 如果是可视索引
+        if (XEUtils.isNumber(row)) {
+          if (row < afterFullData.length) {
+            afIndex = row
+          }
+        } else {
+          afIndex = _vm.findRowIndexOf(afterFullData, row)
+        }
+        // 如果是插入指定行的下一行
+        if (isInsertNextRow) {
+          afIndex = Math.max(afterFullData.length, afIndex + 1)
+        }
+        if (afIndex === -1) {
+          throw new Error(errLog('vxe.error.unableInsert'))
+        }
+        afterFullData.splice(afIndex, 0, ...newRecords)
+        tableFullData.splice(_vm.findRowIndexOf(tableFullData, row), 0, ...newRecords)
+        // 刷新单元格合并
+        mergeList.forEach(mergeItem => {
+          const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
+          if (mergeRowIndex > afIndex) {
+            mergeItem.row = mergeRowIndex + newRecords.length
+          } else if (mergeRowIndex + mergeRowspan > afIndex) {
+            mergeItem.rowspan = mergeRowspan + newRecords.length
+          }
+        })
+      }
+    }
+  }
+  const { insertList, insertMaps } = editStore
+  newRecords.forEach(newRow => {
+    const rowid = getRowid(_vm, newRow)
+    insertMaps[rowid] = newRow
+  })
+  insertList.unshift(...newRecords)
+  _vm.cacheRowMap()
+  _vm.updateScrollYStatus()
+  _vm.handleTableData(treeConfig && transform)
+  if (!(treeConfig && transform)) {
+    _vm.updateAfterDataIndex()
+  }
+  _vm.updateFooter()
+  _vm.checkSelectionStatus()
+  if (_vm.scrollYLoad) {
+    _vm.updateScrollYSpace()
+  }
+  return _vm.$nextTick().then(() => {
+    _vm.updateCellAreas()
+    return _vm.recalculate()
+  }).then(() => {
+    return {
+      row: newRecords.length ? newRecords[newRecords.length - 1] : null,
+      rows: newRecords
+    }
+  })
+}
+
 export default {
   methods: {
     /**
@@ -48,7 +204,7 @@ export default {
      * @param {*} records
      */
     _insert (records) {
-      return this.insertAt(records)
+      return handleInsertRowAt(this, records, null)
     },
     /**
      * 往表格指定行中插入临时数据
@@ -57,133 +213,13 @@ export default {
      * 如果 row 为有效行则插入到该行的位置
      * @param {Object/Array} records 新的数据
      * @param {Row} row 指定行
+     * @returns
      */
     _insertAt (records, row) {
-      const { tableFullTreeData, mergeList, afterFullData, editStore, tableFullData, treeConfig, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = this
-      const { transform, rowField, mapChildrenField } = treeOpts
-      if (!XEUtils.isArray(records)) {
-        records = [records]
-      }
-      const newRecords = this.defineField(records.map(record => Object.assign({}, record)))
-      if (!row) {
-        // 如果为虚拟树
-        if (treeConfig && transform) {
-          insertTreeRow(this, newRecords, false)
-        } else {
-          afterFullData.unshift(...newRecords)
-          tableFullData.unshift(...newRecords)
-          // 刷新单元格合并
-          mergeList.forEach(mergeItem => {
-            const { row: mergeRowIndex } = mergeItem
-            if (mergeRowIndex > 0) {
-              mergeItem.row = mergeRowIndex + newRecords.length
-            }
-          })
-        }
-      } else {
-        if (row === -1) {
-          // 如果为虚拟树
-          if (treeConfig && transform) {
-            insertTreeRow(this, newRecords, true)
-          } else {
-            afterFullData.push(...newRecords)
-            tableFullData.push(...newRecords)
-            // 刷新单元格合并
-            mergeList.forEach(mergeItem => {
-              const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
-              if (mergeRowIndex + mergeRowspan > afterFullData.length) {
-                mergeItem.rowspan = mergeRowspan + newRecords.length
-              }
-            })
-          }
-        } else {
-          // 如果为虚拟树
-          if (treeConfig && transform) {
-            const matchObj = XEUtils.findTree(tableFullTreeData, item => row[rowField] === item[rowField], { children: mapChildrenField })
-            if (matchObj) {
-              const { parent: parentRow } = matchObj
-              const parentChilds = matchObj.items
-              const parentRest = fullAllDataRowIdData[getRowid(this, parentRow)]
-              const parentLevel = parentRest ? parentRest.level : 0
-              newRecords.forEach((item, i) => {
-                const rowid = getRowid(this, item)
-                if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-                  if (item[treeOpts.parentField]) {
-                    if (parentRow && item[treeOpts.parentField] !== parentRow[rowField]) {
-                      errLog('vxe.error.errProp', [`${treeOpts.parentField}=${item[treeOpts.parentField]}`, `${treeOpts.parentField}=${parentRow[rowField]}`])
-                    }
-                  }
-                }
-                if (parentRow) {
-                  item[treeOpts.parentField] = parentRow[rowField]
-                }
-                parentChilds.splice(matchObj.index + i, 0, item)
-                const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1 }
-                fullDataRowIdData[rowid] = rest
-                fullAllDataRowIdData[rowid] = rest
-              })
-            } else {
-              if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-                warnLog('vxe.error.unableInsert')
-              }
-              insertTreeRow(this, newRecords, true)
-            }
-          } else {
-            if (treeConfig) {
-              throw new Error(getLog('vxe.error.noTree', ['insert']))
-            }
-            let afIndex = -1
-            // 如果是可视索引
-            if (XEUtils.isNumber(row)) {
-              if (row < afterFullData.length) {
-                afIndex = row
-              }
-            } else {
-              afIndex = this.findRowIndexOf(afterFullData, row)
-            }
-            if (afIndex === -1) {
-              throw new Error(errLog('vxe.error.unableInsert'))
-            }
-            afterFullData.splice(afIndex, 0, ...newRecords)
-            tableFullData.splice(this.findRowIndexOf(tableFullData, row), 0, ...newRecords)
-            // 刷新单元格合并
-            mergeList.forEach(mergeItem => {
-              const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
-              if (mergeRowIndex > afIndex) {
-                mergeItem.row = mergeRowIndex + newRecords.length
-              } else if (mergeRowIndex + mergeRowspan > afIndex) {
-                mergeItem.rowspan = mergeRowspan + newRecords.length
-              }
-            })
-          }
-        }
-      }
-      const { insertList, insertMaps } = editStore
-      newRecords.forEach(newRow => {
-        const rowid = getRowid(this, newRow)
-        insertMaps[rowid] = newRow
-      })
-      insertList.unshift(...newRecords)
-      this.cacheRowMap()
-      this.updateScrollYStatus()
-      this.handleTableData(treeConfig && transform)
-      if (!(treeConfig && transform)) {
-        this.updateAfterDataIndex()
-      }
-      this.updateFooter()
-      this.checkSelectionStatus()
-      if (this.scrollYLoad) {
-        this.updateScrollYSpace()
-      }
-      return this.$nextTick().then(() => {
-        this.updateCellAreas()
-        return this.recalculate()
-      }).then(() => {
-        return {
-          row: newRecords.length ? newRecords[newRecords.length - 1] : null,
-          rows: newRecords
-        }
-      })
+      return handleInsertRowAt(this, records, row)
+    },
+    _insertNextAt (records, row) {
+      return handleInsertRowAt(this, records, row, true)
     },
     /**
      * 删除指定行数据
@@ -192,11 +228,12 @@ export default {
      * 如果为空则删除所有
      */
     _remove (rows) {
-      const { afterFullData, tableFullData, tableFullTreeData, treeConfig, mergeList, editStore, checkboxOpts, selectCheckboxRows, isInsertByRow, treeOpts } = this
-      const { transform } = treeOpts
+      const { afterFullData, tableFullData, tableFullTreeData, treeConfig, mergeList, editStore, checkboxOpts, selectCheckboxMaps, isInsertByRow, treeOpts } = this
+      const { transform, mapChildrenField } = treeOpts
+      const childrenField = treeOpts.children || treeOpts.childrenField
       const { actived, removeList, insertList, insertMaps } = editStore
       const { checkField } = checkboxOpts
-      let rest = []
+      let delList = []
       if (!rows) {
         rows = tableFullData
       } else if (!XEUtils.isArray(rows)) {
@@ -210,16 +247,18 @@ export default {
       })
       // 如果绑定了多选属性，则更新状态
       if (!checkField) {
-        rows.forEach(row => {
-          const sIndex = this.findRowIndexOf(selectCheckboxRows, row)
-          if (sIndex > -1) {
-            selectCheckboxRows.splice(sIndex, 1)
+        const selectRowMaps = { ...selectCheckboxMaps }
+        rows.forEach((row) => {
+          const rowid = getRowid(this, row)
+          if (selectRowMaps[rowid]) {
+            delete selectRowMaps[rowid]
           }
         })
+        this.selectCheckboxMaps = selectRowMaps
       }
       // 从数据源中移除
       if (tableFullData === rows) {
-        rows = rest = tableFullData.slice(0)
+        rows = delList = tableFullData.slice(0)
         this.tableFullData = []
         this.afterFullData = []
         this.clearMergeCells()
@@ -228,10 +267,14 @@ export default {
         if (treeConfig && transform) {
           rows.forEach((row) => {
             const rowid = getRowid(this, row)
-            const matchObj = XEUtils.findTree(tableFullTreeData, item => rowid === getRowid(this, item), treeOpts)
+            const matchMapObj = XEUtils.findTree(tableFullTreeData, item => rowid === getRowid(this, item), { children: mapChildrenField })
+            if (matchMapObj) {
+              const rItems = matchMapObj.items.splice(matchMapObj.index, 1)
+              delList.push(rItems[0])
+            }
+            const matchObj = XEUtils.findTree(tableFullTreeData, item => rowid === getRowid(this, item), { children: childrenField })
             if (matchObj) {
-              const rItems = matchObj.items.splice(matchObj.index, 1)
-              rest.push(rItems[0])
+              matchObj.items.splice(matchObj.index, 1)
             }
             const afIndex = this.findRowIndexOf(afterFullData, row)
             if (afIndex > -1) {
@@ -243,7 +286,7 @@ export default {
             const tfIndex = this.findRowIndexOf(tableFullData, row)
             if (tfIndex > -1) {
               const rItems = tableFullData.splice(tfIndex, 1)
-              rest.push(rItems[0])
+              delList.push(rItems[0])
             }
             const afIndex = this.findRowIndexOf(afterFullData, row)
             if (afIndex > -1) {
@@ -288,7 +331,7 @@ export default {
         this.updateCellAreas()
         return this.recalculate()
       }).then(() => {
-        return { row: rest.length ? rest[rest.length - 1] : null, rows: rest }
+        return { row: delList.length ? delList[delList.length - 1] : null, rows: delList }
       })
     },
     /**

package/packages/export/src/mixin.js

@@ -38,7 +38,8 @@ function getExportBlobByContent (content, options) {
 
 function hasTreeChildren ($xetable, row) {
   const treeOpts = $xetable.treeOpts
-  return row[treeOpts.childrenField || treeOpts.children] && row[treeOpts.childrenField || treeOpts.children].length > 0
+  const childrenField = treeOpts.children || treeOpts.childrenField
+  return row[childrenField] && row[childrenField].length > 0
 }
 
 function getSeq ($xetable, row, $rowIndex, column, $columnIndex) {
@@ -78,6 +79,7 @@ function toBooleanValue (cellValue) {
 function getLabelData ($xetable, opts, columns, datas) {
   const { isAllExpand, mode } = opts
   const { treeConfig, treeOpts, radioOpts, checkboxOpts, columnOpts } = $xetable
+  const childrenField = treeOpts.children || treeOpts.childrenField
   if (!htmlCellElem) {
     htmlCellElem = document.createElement('div')
   }
@@ -148,7 +150,7 @@ function getLabelData ($xetable, opts, columns, datas) {
         expandMaps.set(row, 1)
         rest.push(Object.assign(item, row))
       }
-    }, treeOpts)
+    }, { children: childrenField })
     return rest
   }
   return datas.map((row, $rowIndex) => {
@@ -856,7 +858,7 @@ function handleFileImport ($xetable, file, opts) {
   const { type, filename } = UtilTools.parseFile(file)
 
   // 检查类型，如果为自定义导出，则不需要校验类型
-  if (!importMethod && !XEUtils.includes(VXETable.config.importTypes, type)) {
+  if (!importMethod && !XEUtils.includes(VXETable.globalConfs.importTypes, type)) {
     if (opts.message !== false) {
       // 检测弹窗模块
       if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
@@ -1040,7 +1042,7 @@ function handleExportAndPrint ($xetable, options, isPrint) {
   const hasTree = treeConfig
   const hasMerge = !hasTree && mergeList.length
   const defOpts = Object.assign({ message: true, isHeader: true }, options)
-  const types = defOpts.types || VXETable.config.exportTypes
+  const types = defOpts.types || VXETable.globalConfs.exportTypes
   const modes = defOpts.modes
   const checkMethod = customOpts.checkMethod
   const exportColumns = collectColumn.slice(0)
@@ -1272,7 +1274,7 @@ export default {
       }
 
       // 检查类型，如果为自定义导出，则不需要校验类型
-      if (!opts.exportMethod && !XEUtils.includes(VXETable.config.exportTypes, type)) {
+      if (!opts.exportMethod && !XEUtils.includes(VXETable.globalConfs.exportTypes, type)) {
         if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
           errLog('vxe.error.notType', [type])
         }
@@ -1347,7 +1349,7 @@ export default {
     },
     _importData (options) {
       const opts = Object.assign({
-        types: VXETable.config.importTypes
+        types: VXETable.globalConfs.importTypes
         // beforeImportMethod: null,
         // afterImportMethod: null
       }, this.importOpts, options)
@@ -1397,7 +1399,7 @@ export default {
       })
     },
     _openImport (options) {
-      const defOpts = Object.assign({ mode: 'insert', message: true, types: VXETable.config.importTypes }, options, this.importOpts)
+      const defOpts = Object.assign({ mode: 'insert', message: true, types: VXETable.globalConfs.importTypes }, options, this.importOpts)
       const { types } = defOpts
       const isTree = !!this.getTreeStatus()
       if (isTree) {

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

@@ -27,8 +27,8 @@ 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, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
+    const { rules, data, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = $xeform
+    const { slots, title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, 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
@@ -43,6 +43,7 @@ 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 itemVertical = (XEUtils.isUndefined(vertical) || XEUtils.isNull(vertical)) ? allVertical : vertical
     const ovEllipsis = itemOverflow === 'ellipsis'
     const ovTitle = itemOverflow === 'title'
     const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip'
@@ -99,6 +100,7 @@ const VxeFormConfigItem = {
         {
           'is--title': title,
           'is--colon': titleColon,
+          'is--vertical': itemVertical,
           'is--asterisk': titleAsterisk,
           'is--required': isRequired,
           'is--hidden': folding && collapseAll,

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

@@ -32,6 +32,10 @@ const props = {
     type: Boolean,
     default: true
   },
+  vertical: {
+    type: Boolean,
+    default: null
+  },
   className: [String, Function],
   contentClassName: [String, Function],
   contentStyle: [Object, Function],
@@ -59,8 +63,8 @@ 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, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
+  const { _e, rules, data, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = _vm
+  const { title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, 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
@@ -75,6 +79,7 @@ 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 itemVertical = (XEUtils.isUndefined(vertical) || XEUtils.isNull(vertical)) ? allVertical : vertical
   const ovEllipsis = itemOverflow === 'ellipsis'
   const ovTitle = itemOverflow === 'title'
   const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip'
@@ -116,6 +121,7 @@ const renderItem = (h, _vm, item, slots) => {
       {
         'is--title': title,
         'is--colon': titleColon,
+        'is--vertical': itemVertical,
         'is--asterisk': titleAsterisk,
         'is--required': isRequired,
         'is--hidden': folding && collapseAll,

package/packages/form/src/form.js

@@ -79,6 +79,10 @@ export default {
     titleColon: { type: Boolean, default: () => GlobalConfig.form.titleColon },
     titleAsterisk: { type: Boolean, default: () => GlobalConfig.form.titleAsterisk },
     titleOverflow: { type: [Boolean, String], default: null },
+    vertical: {
+      type: Boolean,
+      default: null
+    },
     className: [String, Function],
     readonly: Boolean,
     items: Array,

package/packages/input/src/input.js

@@ -636,6 +636,10 @@ export default {
     size: { type: String, default: () => GlobalConfig.input.size || GlobalConfig.size },
     multiple: Boolean,
 
+    // text
+    showWordCount: Boolean,
+    countMethod: Function,
+
     // number、integer、float
     min: { type: [String, Number], default: null },
     max: { type: [String, Number], default: null },
@@ -714,6 +718,12 @@ export default {
     isSearch () {
       return this.type === 'search'
     },
+    inputCount () {
+      return XEUtils.getSize(this.inputValue)
+    },
+    isCountError () {
+      return this.maxlength && this.inputCount > XEUtils.toNumber(this.maxlength)
+    },
     stepValue () {
       const { type, step } = this
       if (type === 'integer') {
@@ -1125,7 +1135,7 @@ export default {
     GlobalEvent.off(this, 'blur')
   },
   render (h) {
-    const { name, form, inputType, inpPlaceholder, inpMaxlength, inpReadonly, className, controls, inputValue, isDatePickerType, visiblePanel, isActivated, vSize, type, align, readonly, disabled, autocomplete } = this
+    const { name, form, inputType, inpPlaceholder, inpMaxlength, inpReadonly, className, controls, showWordCount, countMethod, inputValue, isDatePickerType, visiblePanel, isActivated, vSize, type, align, readonly, disabled, autocomplete } = this
     const childs = []
     const prefix = rendePrefixIcon(h, this)
     const suffix = renderSuffixIcon(h, this)
@@ -1173,6 +1183,18 @@ export default {
     if (isDatePickerType) {
       childs.push(renderPanel(h, this))
     }
+    let isWordCount = false
+    // 统计字数
+    if (showWordCount && ['text', 'search'].includes(type)) {
+      isWordCount = true
+      childs.push(
+        h('span', {
+          class: ['vxe-input--count', {
+            'is--error': this.isCountError
+          }]
+        }, countMethod ? `${countMethod({ value: inputValue })}` : `${this.inputCount}${inpMaxlength ? `/${inpMaxlength}` : ''}`)
+      )
+    }
     return h('div', {
       class: ['vxe-input', `type--${type}`, className, {
         [`size--${vSize}`]: vSize,
@@ -1182,6 +1204,7 @@ export default {
         'is--suffix': !!suffix,
         'is--readonly': readonly,
         'is--visivle': visiblePanel,
+        'is--count': isWordCount,
         'is--disabled': disabled,
         'is--active': isActivated
       }]

package/packages/keyboard/src/mixin.js

@@ -112,11 +112,12 @@ export default {
     // 处理当前行方向键移动
     moveCurrentRow (isUpArrow, isDwArrow, evnt) {
       const { currentRow, treeConfig, treeOpts, afterFullData } = this
+      const childrenField = treeOpts.children || treeOpts.childrenField
       let targetRow
       evnt.preventDefault()
       if (currentRow) {
         if (treeConfig) {
-          const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, treeOpts)
+          const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField })
           if (isUpArrow && index > 0) {
             targetRow = items[index - 1]
           } else if (isDwArrow && index < items.length - 1) {