vxe-table 3.7.8 → 3.7.9-beta.1

package/packages/grid/src/grid.js

@@ -137,6 +137,150 @@ function getTableOns (_vm) {
   return ons
 }
 
+/**
+ * 渲染表单
+ */
+function renderForms (h, _vm) {
+  const { _e, $scopedSlots, formConfig } = _vm
+  const formSlot = $scopedSlots.form
+  const hasForm = !!(formSlot || isEnableConf(formConfig))
+
+  return hasForm ? h('div', {
+    key: 'form',
+    ref: 'formWrapper',
+    class: 'vxe-grid--form-wrapper'
+  }, formSlot ? formSlot.call(_vm, { $grid: _vm }, h) : renderDefaultForm(h, _vm)) : _e()
+}
+
+/**
+ * 渲染工具栏
+ */
+function renderToolbars (h, _vm) {
+  const { _e, $scopedSlots, toolbarConfig, toolbar } = _vm
+  const toolbarSlot = $scopedSlots.toolbar
+  const hasToolbar = !!(toolbarSlot || isEnableConf(toolbarConfig) || toolbar)
+
+  return hasToolbar ? h('div', {
+    key: 'toolbar',
+    ref: 'toolbarWrapper',
+    class: 'vxe-grid--toolbar-wrapper'
+  }, toolbarSlot
+    ? toolbarSlot.call(_vm, { $grid: _vm }, h)
+    : [
+        h('vxe-toolbar', {
+          props: _vm.toolbarOpts,
+          ref: 'xToolbar',
+          scopedSlots: getToolbarSlots(_vm)
+        })
+      ]
+  ) : _e()
+}
+
+/**
+ * 渲染表格顶部区域
+ */
+function renderTops (h, _vm) {
+  const { _e, $scopedSlots } = _vm
+  const topSlot = $scopedSlots.top
+
+  return topSlot ? h('div', {
+    key: 'top',
+    ref: 'topWrapper',
+    class: 'vxe-grid--top-wrapper'
+  }, topSlot.call(_vm, { $grid: _vm }, h)) : _e()
+}
+
+/**
+ * 渲染表格
+ */
+function renderTables (h, _vm) {
+  const { $scopedSlots, tableProps } = _vm
+
+  return h('vxe-table', {
+    key: 'table',
+    props: tableProps,
+    on: getTableOns(_vm),
+    scopedSlots: $scopedSlots,
+    ref: 'xTable'
+  })
+}
+
+/**
+ * 渲染表格底部区域
+ */
+function renderBottoms (h, _vm) {
+  const { _e, $scopedSlots } = _vm
+  const bottomSlot = $scopedSlots.bottom
+
+  return bottomSlot ? h('div', {
+    key: 'bottom',
+    ref: 'bottomWrapper',
+    class: 'vxe-grid--bottom-wrapper'
+  }, bottomSlot.call(_vm, { $grid: _vm }, h)) : _e()
+}
+
+/**
+ * 渲染分页
+ */
+function renderPagers (h, _vm) {
+  const { _e, $scopedSlots, pagerConfig, proxyConfig, tablePage } = _vm
+  const pagerSlot = $scopedSlots.pager
+  const hasPager = !!(pagerSlot || isEnableConf(pagerConfig))
+
+  return hasPager ? h('div', {
+    key: 'pager',
+    ref: 'pagerWrapper',
+    class: 'vxe-grid--pager-wrapper'
+  }, pagerSlot
+    ? pagerSlot.call(_vm, { $grid: _vm }, h)
+    : [
+        h('vxe-pager', {
+          props: { ..._vm.pagerOpts, ...(proxyConfig ? tablePage : {}) },
+          on: {
+            'page-change': _vm.pageChangeEvent
+          },
+          scopedSlots: getPagerSlots(_vm)
+        })
+      ]
+  ) : _e()
+}
+
+const defaultLayouts = ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager']
+
+function renderLayout (h, _vm) {
+  const { layouts } = _vm
+  const vns = []
+  const currLayouts = (layouts && layouts.length ? layouts : (GlobalConfig.grid.layouts || defaultLayouts))
+  currLayouts.forEach(name => {
+    switch (name) {
+      case 'Form':
+        vns.push(renderForms(h, _vm))
+        break
+      case 'Toolbar':
+        vns.push(renderToolbars(h, _vm))
+        break
+      case 'Top':
+        vns.push(renderTops(h, _vm))
+        break
+      case 'Table':
+        vns.push(renderTables(h, _vm))
+        break
+      case 'Bottom':
+        vns.push(renderBottoms(h, _vm))
+        break
+      case 'Pager':
+        vns.push(renderPagers(h, _vm))
+        break
+      default:
+        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+          errLog('vxe.error.notProp', [`layouts -> ${name}`])
+        }
+        break
+    }
+  })
+  return vns
+}
+
 Object.keys(Table.methods).forEach(name => {
   methods[name] = function (...args) {
     return this.$refs.xTable && this.$refs.xTable[name](...args)
@@ -148,6 +292,7 @@ export default {
   mixins: [vSize],
   props: {
     ...Table.props,
+    layouts: Array,
     columns: Array,
     pagerConfig: [Boolean, Object],
     proxyConfig: Object,
@@ -279,10 +424,7 @@ export default {
     GlobalEvent.off(this, 'keydown')
   },
   render (h) {
-    const { $scopedSlots, vSize, isZMax } = this
-    const hasForm = !!($scopedSlots.form || isEnableConf(this.formConfig))
-    const hasToolbar = !!($scopedSlots.toolbar || isEnableConf(this.toolbarConfig) || this.toolbar)
-    const hasPager = !!($scopedSlots.pager || isEnableConf(this.pagerConfig))
+    const { vSize, isZMax } = this
     return h('div', {
       class: ['vxe-grid', {
         [`size--${vSize}`]: vSize,
@@ -292,75 +434,7 @@ export default {
         'is--loading': this.loading || this.tableLoading
       }],
       style: this.renderStyle
-    }, [
-      /**
-       * 渲染表单
-       */
-      hasForm ? h('div', {
-        ref: 'formWrapper',
-        class: 'vxe-grid--form-wrapper'
-      }, $scopedSlots.form
-        ? $scopedSlots.form.call(this, { $grid: this }, h)
-        : renderDefaultForm(h, this)
-      ) : null,
-      /**
-       * 渲染工具栏
-       */
-      hasToolbar ? h('div', {
-        ref: 'toolbarWrapper',
-        class: 'vxe-grid--toolbar-wrapper'
-      }, $scopedSlots.toolbar
-        ? $scopedSlots.toolbar.call(this, { $grid: this }, h)
-        : [
-            h('vxe-toolbar', {
-              props: this.toolbarOpts,
-              ref: 'xToolbar',
-              scopedSlots: getToolbarSlots(this)
-            })
-          ]
-      ) : null,
-      /**
-       * 渲染表格顶部区域
-       */
-      $scopedSlots.top ? h('div', {
-        ref: 'topWrapper',
-        class: 'vxe-grid--top-wrapper'
-      }, $scopedSlots.top.call(this, { $grid: this }, h)) : null,
-      /**
-       * 渲染表格
-       */
-      h('vxe-table', {
-        props: this.tableProps,
-        on: getTableOns(this),
-        scopedSlots: $scopedSlots,
-        ref: 'xTable'
-      }),
-      /**
-       * 渲染表格底部区域
-       */
-      $scopedSlots.bottom ? h('div', {
-        ref: 'bottomWrapper',
-        class: 'vxe-grid--bottom-wrapper'
-      }, $scopedSlots.bottom.call(this, { $grid: this }, h)) : null,
-      /**
-       * 渲染分页
-       */
-      hasPager ? h('div', {
-        ref: 'pagerWrapper',
-        class: 'vxe-grid--pager-wrapper'
-      }, $scopedSlots.pager
-        ? $scopedSlots.pager.call(this, { $grid: this }, h)
-        : [
-            h('vxe-pager', {
-              props: { ...this.pagerOpts, ...(this.proxyConfig ? this.tablePage : {}) },
-              on: {
-                'page-change': this.pageChangeEvent
-              },
-              scopedSlots: getPagerSlots(this)
-            })
-          ]
-      ) : null
-    ])
+    }, renderLayout(h, this))
   },
   methods: {
     ...methods,

package/packages/locale/lang/en-US.js

@@ -168,10 +168,18 @@ export default {
       pagesize: '{0}/page',
       total: 'Total {0} record',
       pageClassifier: '',
+      homePage: 'Home',
+      homePageTitle: 'Home page',
       prevPage: 'Previous page',
+      prevPageTitle: 'Previous page',
       nextPage: 'next page',
+      nextPageTitle: 'next page',
       prevJump: 'Jump previous page',
-      nextJump: 'Jump next page'
+      prevJumpTitle: 'Jump previous page',
+      nextJump: 'Jump next page',
+      nextJumpTitle: 'Jump next page',
+      endPage: 'End page',
+      endPageTitle: 'End'
     },
     alert: {
       title: 'Message notification'

package/packages/locale/lang/ja-JP.js

@@ -168,10 +168,18 @@ export default {
       pagesize: '{0}件/ページ',
       total: '全 {0} 件',
       pageClassifier: '',
+      homePage: 'Home',
+      homePageTitle: 'Home page',
       prevPage: '前のページ',
+      prevPageTitle: '前のページ',
       nextPage: '次のページ',
+      nextPageTitle: '次のページ',
       prevJump: '前のページに移動',
-      nextJump: '次のページに移動'
+      prevJumpTitle: '前のページに移動',
+      nextJump: '次のページに移動',
+      nextJumpTitle: '次のページに移動',
+      endPage: 'End',
+      endPageTitle: 'End page'
     },
     alert: {
       title: 'メッセージ'

package/packages/locale/lang/zh-CN.js

@@ -168,10 +168,18 @@ export default {
       pagesize: '{0}条/页',
       total: '共 {0} 条记录',
       pageClassifier: '页',
+      homePage: '首页',
+      homePageTitle: '首页',
       prevPage: '上一页',
+      prevPageTitle: '上一页',
       nextPage: '下一页',
+      nextPageTitle: '下一页',
       prevJump: '向上跳页',
-      nextJump: '向下跳页'
+      prevJumpTitle: '向上跳页',
+      nextJump: '向下跳页',
+      nextJumpTitle: '向下跳页',
+      endPage: '末页',
+      endPageTitle: '末页'
     },
     alert: {
       title: '消息提示'

package/packages/locale/lang/zh-TC.js

@@ -168,10 +168,18 @@ export default {
       pagesize: '{0}項/頁',
       total: '共 {0} 項記錄',
       pageClassifier: '頁',
+      homePage: '首頁',
+      homePageTitle: '首頁',
       prevPage: '上一頁',
+      prevPageTitle: '上一頁',
       nextPage: '下一頁',
+      nextPageTitle: '下一頁',
       prevJump: '向上跳頁',
-      nextJump: '向下跳頁'
+      prevJumpTitle: '向上跳頁',
+      nextJump: '向下跳頁',
+      nextJumpTitle: '向下跳頁',
+      endPage: '末頁',
+      endPageTitle: '末頁'
     },
     alert: {
       title: '訊息提示'

package/packages/pager/src/pager.js

@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import vSize from '../../mixins/size'
+import { errLog } from '../../tools/log'
 
 export default {
   name: 'VxePager',
@@ -38,7 +39,9 @@ export default {
     iconJumpPrev: String,
     iconJumpNext: String,
     iconNextPage: String,
-    iconJumpMore: String
+    iconJumpMore: String,
+    iconHomePage: String,
+    iconEndPage: String
   },
   inject: {
     $xegrid: {
@@ -96,7 +99,13 @@ export default {
       )
     }
     this.layouts.forEach(name => {
-      childNodes.push(this[`render${name}`](h))
+      if (this[`render${name}`](h)) {
+        childNodes.push(this[`render${name}`](h))
+      } else {
+        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+          errLog('vxe.error.notProp', [`layouts -> ${name}`])
+        }
+      }
     })
     if ($scopedSlots.right) {
       childNodes.push(
@@ -122,6 +131,44 @@ export default {
     ])
   },
   methods: {
+    // 首页
+    renderHome (h) {
+      return h('button', {
+        class: ['vxe-pager--prev-btn', {
+          'is--disabled': this.currentPage <= 1
+        }],
+        attrs: {
+          type: 'button',
+          title: GlobalConfig.i18n('vxe.pager.homePageTitle')
+        },
+        on: {
+          click: this.homePage
+        }
+      }, [
+        h('i', {
+          class: ['vxe-pager--btn-icon', this.iconHomePage || GlobalConfig.icon.PAGER_HOME]
+        })
+      ])
+    },
+    // 末页
+    renderEnd (h) {
+      return h('button', {
+        class: ['vxe-pager--prev-btn', {
+          'is--disabled': this.currentPage <= 1
+        }],
+        attrs: {
+          type: 'button',
+          title: GlobalConfig.i18n('vxe.pager.endPageTitle')
+        },
+        on: {
+          click: this.endPage
+        }
+      }, [
+        h('i', {
+          class: ['vxe-pager--btn-icon', this.iconEndPage || GlobalConfig.icon.PAGER_END]
+        })
+      ])
+    },
     // 上一页
     renderPrevPage (h) {
       return h('button', {
@@ -130,7 +177,7 @@ export default {
         }],
         attrs: {
           type: 'button',
-          title: GlobalConfig.i18n('vxe.pager.prevPage')
+          title: GlobalConfig.i18n('vxe.pager.prevPageTitle')
         },
         on: {
           click: this.prevPage
@@ -150,7 +197,7 @@ export default {
         }],
         attrs: {
           type: 'button',
-          title: GlobalConfig.i18n('vxe.pager.prevJump')
+          title: GlobalConfig.i18n('vxe.pager.prevJumpTitle')
         },
         on: {
           click: this.prevJump
@@ -185,7 +232,7 @@ export default {
         }],
         attrs: {
           type: 'button',
-          title: GlobalConfig.i18n('vxe.pager.nextJump')
+          title: GlobalConfig.i18n('vxe.pager.nextJumpTitle')
         },
         on: {
           click: this.nextJump
@@ -207,7 +254,7 @@ export default {
         }],
         attrs: {
           type: 'button',
-          title: GlobalConfig.i18n('vxe.pager.nextPage')
+          title: GlobalConfig.i18n('vxe.pager.nextPageTitle')
         },
         on: {
           click: this.nextPage
@@ -351,6 +398,18 @@ export default {
     getPageCount (total, size) {
       return Math.max(Math.ceil(total / size), 1)
     },
+    homePage () {
+      const { currentPage } = this
+      if (currentPage > 1) {
+        this.jumpPage(1)
+      }
+    },
+    endPage () {
+      const { currentPage, pageCount } = this
+      if (currentPage < pageCount) {
+        this.jumpPage(pageCount)
+      }
+    },
     prevPage () {
       const { currentPage, pageCount } = this
       if (currentPage > 1) {

package/packages/table/src/body.js

@@ -87,7 +87,7 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
     columnOpts,
     validErrorMaps
   } = $xetable
-  const { type, cellRender, editRender, align, showOverflow, className, treeNode } = column
+  const { type, cellRender, editRender, align, showOverflow, className, treeNode, slots } = column
   const { actived } = editStore
   const { rHeight: scrollYRHeight } = sYOpts
   const { height: rowHeight } = rowOpts
@@ -245,13 +245,16 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
       }, column.renderCell(h, params))
     )
     if (showValidTip && errorValidItem) {
+      const errRule = errorValidItem.rule
+      const validSlot = slots ? slots.valid : null
+      const validParams = { ...params, ...errorValidItem }
       tdVNs.push(
         h('div', {
-          class: 'vxe-cell--valid-error-hint',
-          style: errorValidItem.rule && errorValidItem.rule.maxWidth ? {
-            width: `${errorValidItem.rule.maxWidth}px`
+          class: ['vxe-cell--valid-error-hint', UtilTools.getClass(validOpts.className, errorValidItem)],
+          style: errRule && errRule.maxWidth ? {
+            width: `${errRule.maxWidth}px`
           } : null
-        }, [
+        }, validSlot ? $xetable.callSlot(validSlot, validParams, h) : [
           h('span', {
             class: 'vxe-cell--valid-error-msg'
           }, errorValidItem.content)

package/packages/table/src/methods.js

@@ -680,7 +680,8 @@ const Methods = {
       }
       XEUtils.eachTree(rows, (childRow, index, items, path, parent, nodes) => {
         const rowid = getRowid(this, childRow)
-        const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, items, parent, level: parentLevel + nodes.length }
+        const parentRow = parent || row
+        const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, items, parent: parentRow, level: parentLevel + nodes.length }
         fullDataRowIdData[rowid] = rest
         fullDataRowMap.set(childRow, rest)
         fullAllDataRowIdData[rowid] = rest
@@ -1382,7 +1383,8 @@ const Methods = {
         rowid = getRowid(this, rowOrRowid)
       }
       if (rowid) {
-        return fullDataRowIdData[rowid] ? fullDataRowIdData[rowid].parent : null
+        const rest = fullDataRowIdData[rowid]
+        return rest ? rest.parent : null
       }
     }
     return null
@@ -1410,9 +1412,9 @@ const Methods = {
    * 如果存在排序，继续处理
    */
   getTableData () {
-    const { tableFullData, afterFullData, tableData, footerTableData } = this
+    const { treeConfig, tableFullData, afterFullData, tableData, footerTableData, tableFullTreeData } = this
     return {
-      fullData: tableFullData.slice(0),
+      fullData: treeConfig ? tableFullTreeData.slice(0) : tableFullData.slice(0),
       visibleData: afterFullData.slice(0),
       tableData: tableData.slice(0),
       footerData: footerTableData.slice(0)
@@ -1457,9 +1459,21 @@ const Methods = {
    * 设置为固定列
    */
   setColumnFixed (fieldOrColumn, fixed) {
+    const { isMaxFixedColumn, columnOpts } = this
+    const { maxFixedSize } = columnOpts
     const column = handleFieldOrColumn(this, fieldOrColumn)
     const targetColumn = getRootColumn(this, column)
     if (targetColumn && targetColumn.fixed !== fixed) {
+      // 是否超过最大固定列数量
+      if (!targetColumn.fixed && isMaxFixedColumn) {
+        if (VXETable.modal) {
+          VXETable.modal.message({
+            status: 'error',
+            content: GlobalConfig.i18n('vxe.table.maxFixedCol', [maxFixedSize])
+          })
+        }
+        return this.$nextTick()
+      }
       XEUtils.eachTree([targetColumn], (column) => {
         column.fixed = fixed
       })
@@ -1834,12 +1848,12 @@ const Methods = {
     Object.assign(columnStore, { leftList, centerList, rightList })
     if (scrollXLoad) {
       if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-        if (this.showHeader && !this.showHeaderOverflow) {
-          warnLog('vxe.error.reqProp', ['show-header-overflow'])
-        }
-        if (this.showFooter && !this.showFooterOverflow) {
-          warnLog('vxe.error.reqProp', ['show-footer-overflow'])
-        }
+        // if (this.showHeader && !this.showHeaderOverflow) {
+        //   warnLog('vxe.error.reqProp', ['show-header-overflow'])
+        // }
+        // if (this.showFooter && !this.showFooterOverflow) {
+        //   warnLog('vxe.error.reqProp', ['show-footer-overflow'])
+        // }
         if (this.spanMethod) {
           warnLog('vxe.error.scrollErrProp', ['span-method'])
         }

package/packages/tools/dom.js

@@ -132,9 +132,11 @@ export const DomTools = {
     return getNodeOffset(elem, container, { left: 0, top: 0 })
   },
   getAbsolutePos (elem) {
+    // 当主页面嵌套在iframe时，elem.getBoundingClientRect()仅计算在当前body内的边界距离，忽略了body所在的边界距离
+    const bodyBounding = document.body.getBoundingClientRect()
     const bounding = elem.getBoundingClientRect()
-    const boundingTop = bounding.top
-    const boundingLeft = bounding.left
+    const boundingTop = bounding.top - bodyBounding.top
+    const boundingLeft = bounding.left - bodyBounding.left
     const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
     return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
   },

package/packages/v-x-e-table/src/conf.js

@@ -165,6 +165,8 @@ export default {
     SELECT_CLOSE: iconPrefix + 'caret-down',
 
     // pager
+    PAGER_HOME: iconPrefix + 'home-page',
+    PAGER_END: iconPrefix + 'end-page',
     PAGER_JUMP_PREV: iconPrefix + 'arrow-double-left',
     PAGER_JUMP_NEXT: iconPrefix + 'arrow-double-right',
     PAGER_PREV_PAGE: iconPrefix + 'arrow-left',