vxe-table 3.5.0-beta.0 → 3.5.0-beta.1

package/packages/table/src/methods.js

@@ -1902,10 +1902,6 @@ const Methods = {
       footerSpanMethod,
       isAllOverflow,
       visibleColumn
-      // isMergeLeftFixedExceeded,
-      // isMergeRightFixedExceeded,
-      // isMergeFooterLeftFixedExceeded,
-      // isMergeFooterRightFixedExceeded
     } = this
     const containerList = ['main', 'left', 'right']
     const emptyPlaceholderElem = $refs.emptyPlaceholder
@@ -2023,14 +2019,6 @@ const Methods = {
                 tableColumn = fixedColumn
               } else {
                 tableColumn = visibleColumn
-                // 检查固定列是否被合并，合并范围是否超出固定列
-                // if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') {
-                //   tableColumn = fixedColumn
-                // } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') {
-                //   tableColumn = fixedColumn
-                // } else {
-                //   tableColumn = visibleColumn
-                // }
               }
             } else {
               tableColumn = visibleColumn
@@ -2056,14 +2044,6 @@ const Methods = {
                 tableColumn = fixedColumn
               } else {
                 tableColumn = visibleColumn
-                // 检查固定列是否被合并，合并范围是否超出固定列
-                // if (mergeFooterList.length && !isMergeFooterLeftFixedExceeded && fixedType === 'left') {
-                //   tableColumn = fixedColumn
-                // } else if (mergeFooterList.length && !isMergeFooterRightFixedExceeded && fixedType === 'right') {
-                //   tableColumn = fixedColumn
-                // } else {
-                //   tableColumn = visibleColumn
-                // }
               }
             } else {
               tableColumn = visibleColumn
@@ -2284,6 +2264,7 @@ const Methods = {
     const isEsc = keyCode === 27
     if (isEsc) {
       this.preventEvent(evnt, 'event.keydown', null, () => {
+        this.emitEvent('keydown-start', {}, evnt)
         if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
           this.handleKeyboardEvent(evnt)
         } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
@@ -2304,6 +2285,7 @@ const Methods = {
           }
         }
         this.emitEvent('keydown', {}, evnt)
+        this.emitEvent('keydown-end', {}, evnt)
       })
     }
   },
@@ -2549,19 +2531,9 @@ const Methods = {
     this.updateCellAreas()
     this.recalculate(true)
   },
-  handleTooltipLeaveMethod () {
-    const tooltipOpts = this.tooltipOpts
-    setTimeout(() => {
-      if (!this.tooltipActive) {
-        this.closeTooltip()
-      }
-    }, tooltipOpts.leaveDelay)
-    return false
-  },
   handleTargetEnterEvent (isClear) {
     const $tooltip = this.$refs.tooltip
     clearTimeout(this.tooltipTimeout)
-    this.tooltipActive = true
     if (isClear) {
       this.closeTooltip()
     } else {
@@ -2573,7 +2545,6 @@ const Methods = {
   handleTargetLeaveEvent () {
     const tooltipOpts = this.tooltipOpts
     let $tooltip = this.$refs.tooltip
-    this.tooltipActive = false
     if ($tooltip) {
       $tooltip.setActived(false)
     }
@@ -2590,16 +2561,19 @@ const Methods = {
   },
   triggerHeaderHelpEvent (evnt, params) {
     const { column } = params
-    const { titleHelp } = column
-    if (titleHelp.content || titleHelp.message) {
+    const titlePrefix = column.titlePrefix || column.titleHelp
+    if (titlePrefix.content || titlePrefix.message) {
       const { $refs, tooltipStore } = this
-      const $tooltip = $refs.tooltip
-      const content = getFuncText(titleHelp.content || titleHelp.message)
+      const content = getFuncText(titlePrefix.content || titlePrefix.message)
       this.handleTargetEnterEvent(true)
       tooltipStore.visible = true
-      if ($tooltip) {
-        $tooltip.open(evnt.currentTarget, content)
-      }
+      tooltipStore.currOpts = { ...titlePrefix, content: null }
+      this.$nextTick(() => {
+        const $tooltip = $refs.tooltip
+        if ($tooltip) {
+          $tooltip.open(evnt.currentTarget, content)
+        }
+      })
     }
   },
   /**
@@ -2665,7 +2639,6 @@ const Methods = {
     const { $refs, tooltipOpts, tooltipStore } = this
     const { column, row } = params
     const { showAll, enabled, contentMethod } = tooltipOpts
-    const tooltip = $refs.tooltip
     const customContent = contentMethod ? contentMethod(params) : null
     const useCustom = contentMethod && !XEUtils.eqNull(customContent)
     const content = useCustom ? customContent : (column.type === 'html' ? overflowElem.innerText : overflowElem.textContent).trim()
@@ -2674,11 +2647,15 @@ const Methods = {
       Object.assign(tooltipStore, {
         row,
         column,
-        visible: true
+        visible: true,
+        currOpts: null
+      })
+      this.$nextTick(() => {
+        const $tooltip = $refs.tooltip
+        if ($tooltip) {
+          $tooltip.open(isCellOverflow ? overflowElem : (tipElem || overflowElem), UtilTools.formatText(content))
+        }
       })
-      if (tooltip) {
-        tooltip.open(isCellOverflow ? overflowElem : (tipElem || overflowElem), UtilTools.formatText(content))
-      }
     }
     return this.$nextTick()
   },
@@ -2702,7 +2679,8 @@ const Methods = {
         row: null,
         column: null,
         content: null,
-        visible: false
+        visible: false,
+        currOpts: null
       })
       if (tooltip) {
         tooltip.close()

package/packages/table/src/table.js

@@ -389,6 +389,13 @@ export default {
         insertList: [],
         removeList: []
       },
+      // 存放 tooltip 相关信息
+      tooltipStore: {
+        row: null,
+        column: null,
+        visible: false,
+        currOpts: null
+      },
       // 存放数据校验相关信息
       validStore: {
         visible: false,
@@ -480,11 +487,10 @@ export default {
       return Object.assign({}, GlobalConfig.table.checkboxConfig, this.checkboxConfig)
     },
     tooltipOpts () {
-      const opts = Object.assign({ leaveDelay: 300 }, GlobalConfig.table.tooltipConfig, this.tooltipConfig)
-      if (opts.enterable) {
-        opts.leaveMethod = this.handleTooltipLeaveMethod
-      }
-      return opts
+      return Object.assign({}, GlobalConfig.tooltip, GlobalConfig.table.tooltipConfig, this.tooltipConfig)
+    },
+    tipConfig () {
+      return { ...this.tooltipOpts, ...this.tooltipStore.currOpts }
     },
     validTipOpts () {
       return Object.assign({ isArrow: false }, this.tooltipOpts)
@@ -598,54 +604,6 @@ export default {
       }
       return false
     }
-    // isMergeLeftFixedExceeded () {
-    //   const { mergeList, columnStore, visibleColumn } = this
-    //   const { leftList } = columnStore
-    //   const lastFCIndex = visibleColumn.indexOf(leftList[leftList.length - 1])
-    //   for (let i = 0, len = mergeList.length; i < len; i++) {
-    //     const item = mergeList[i]
-    //     if (item.col <= lastFCIndex && item.col + item.colspan > lastFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // },
-    // isMergeRightFixedExceeded () {
-    //   const { mergeList, columnStore, visibleColumn } = this
-    //   const { rightList } = columnStore
-    //   const firstFCIndex = visibleColumn.indexOf(rightList[0])
-    //   for (let i = 0, len = mergeList.length; i < len; i++) {
-    //     const item = mergeList[i]
-    //     if (item.col < firstFCIndex && item.col + item.colspan >= firstFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // },
-    // isMergeFooterLeftFixedExceeded () {
-    //   const { mergeFooterList, columnStore, visibleColumn } = this
-    //   const { leftList } = columnStore
-    //   const lastFCIndex = visibleColumn.indexOf(leftList[leftList.length - 1])
-    //   for (let i = 0, len = mergeFooterList.length; i < len; i++) {
-    //     const item = mergeFooterList[i]
-    //     if (item.col <= lastFCIndex && item.col + item.colspan > lastFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // },
-    // isMergeFooterRightFixedExceeded () {
-    //   const { mergeFooterList, columnStore, visibleColumn } = this
-    //   const { rightList } = columnStore
-    //   const firstFCIndex = visibleColumn.indexOf(rightList[0])
-    //   for (let i = 0, len = mergeFooterList.length; i < len; i++) {
-    //     const item = mergeFooterList[i]
-    //     if (item.col < firstFCIndex && item.col + item.colspan >= firstFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // }
   },
   watch: {
     data (value) {
@@ -713,8 +671,6 @@ export default {
       scrollXStore: {},
       // 存放纵向 Y 虚拟滚动相关信息
       scrollYStore: {},
-      // 存放 tooltip 相关信息
-      tooltipStore: {},
       // 表格宽度
       tableWidth: 0,
       // 表格高度
@@ -771,7 +727,7 @@ export default {
       if (this.editConfig && editOpts.showStatus && !this.keepSource) {
         warnLog('vxe.error.reqProp', ['keep-source'])
       }
-      if (treeConfig && treeOpts.line && (!this.rowKey || !rowOpts.useKey || !showOverflow)) {
+      if (treeConfig && treeOpts.line && (!(this.rowKey || rowOpts.useKey) || !showOverflow)) {
         warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow'])
       }
       if (this.showFooter && !this.footerMethod) {
@@ -984,7 +940,6 @@ export default {
       highlightHoverColumn,
       editConfig,
       validTipOpts,
-      tooltipOpts,
       initStore,
       columnStore,
       filterStore,
@@ -1176,7 +1131,7 @@ export default {
        */
       hasTip ? h('vxe-tooltip', {
         ref: 'tooltip',
-        props: tooltipOpts
+        props: this.tipConfig
       }) : _e(),
       /**
        * 校验提示

package/packages/tooltip/src/tooltip.js

@@ -41,6 +41,29 @@ function showTip (_vm) {
   return _vm.updatePlacement()
 }
 
+function renderContent (h, _vm) {
+  const { $scopedSlots, useHTML, tipContent } = _vm
+  if ($scopedSlots.content) {
+    return h('div', {
+      key: 1,
+      class: 'vxe-table--tooltip-content'
+    }, $scopedSlots.content.call(this, {}))
+  }
+  if (useHTML) {
+    return h('div', {
+      key: 2,
+      class: 'vxe-table--tooltip-content',
+      domProps: {
+        innerHTML: tipContent
+      }
+    })
+  }
+  return h('div', {
+    key: 3,
+    class: 'vxe-table--tooltip-content'
+  }, UtilTools.formatText(tipContent))
+}
+
 export default {
   name: 'VxeTooltip',
   mixins: [vSize],
@@ -49,19 +72,19 @@ export default {
     size: { type: String, default: () => GlobalConfig.tooltip.size || GlobalConfig.size },
     trigger: { type: String, default: () => GlobalConfig.tooltip.trigger },
     theme: { type: String, default: () => GlobalConfig.tooltip.theme },
-    content: [String, Number],
+    content: { type: [String, Number], default: null },
+    useHTML: Boolean,
     zIndex: [String, Number],
     isArrow: { type: Boolean, default: true },
     enterable: Boolean,
     enterDelay: { type: Number, default: () => GlobalConfig.tooltip.enterDelay },
-    leaveDelay: { type: Number, default: () => GlobalConfig.tooltip.leaveDelay },
-    leaveMethod: Function
+    leaveDelay: { type: Number, default: () => GlobalConfig.tooltip.leaveDelay }
   },
   data () {
     return {
       isUpdate: false,
       visible: false,
-      message: '',
+      tipContent: '',
       tipActive: false,
       tipTarget: null,
       tipZindex: 0,
@@ -74,7 +97,7 @@ export default {
   },
   watch: {
     content (value) {
-      this.message = value
+      this.tipContent = value
     },
     value (value) {
       if (!this.isUpdate) {
@@ -94,7 +117,7 @@ export default {
     const { $el, trigger, content, value } = this
     const parentNode = $el.parentNode
     let target
-    this.message = content
+    this.tipContent = content
     this.tipZindex = UtilTools.nextZIndex()
     XEUtils.arrayEach($el.children, (elem, index) => {
       if (index > 1) {
@@ -134,7 +157,7 @@ export default {
     }
   },
   render (h) {
-    const { $scopedSlots, vSize, theme, message, tipActive, isArrow, visible, tipStore, enterable } = this
+    const { $scopedSlots, vSize, theme, tipActive, isArrow, visible, tipStore, enterable } = this
     let on
     if (enterable) {
       on = {
@@ -155,9 +178,7 @@ export default {
       ref: 'tipWrapper',
       on
     }, [
-      h('div', {
-        class: 'vxe-table--tooltip-content'
-      }, $scopedSlots.content ? $scopedSlots.content.call(this, {}) : message),
+      renderContent(h, this),
       h('div', {
         class: 'vxe-table--tooltip-arrow',
         style: tipStore.arrowStyle
@@ -165,8 +186,8 @@ export default {
     ].concat($scopedSlots.default ? $scopedSlots.default.call(this, {}) : []))
   },
   methods: {
-    open (target, message) {
-      return this.toVisible(target || this.target, message)
+    open (target, content) {
+      return this.toVisible(target || this.target, content)
     },
     close () {
       this.tipTarget = null
@@ -193,13 +214,13 @@ export default {
         this.tipZindex = UtilTools.nextZIndex()
       }
     },
-    toVisible (target, message) {
+    toVisible (target, content) {
       if (target) {
         const { trigger, enterDelay } = this
         this.tipActive = true
         this.tipTarget = target
-        if (message) {
-          this.message = message
+        if (content) {
+          this.tipContent = content
         }
         if (enterDelay && trigger === 'hover') {
           this.showDelayTip()
@@ -246,17 +267,15 @@ export default {
     wrapperMouseenterEvent () {
       this.tipActive = true
     },
-    wrapperMouseleaveEvent (evnt) {
-      const { leaveMethod, trigger, enterable, leaveDelay } = this
+    wrapperMouseleaveEvent () {
+      const { trigger, enterable, leaveDelay } = this
       this.tipActive = false
-      if (!leaveMethod || leaveMethod({ $event: evnt }) !== false) {
-        if (enterable && trigger === 'hover') {
-          setTimeout(() => {
-            if (!this.tipActive) {
-              this.close()
-            }
-          }, leaveDelay)
-        }
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!this.tipActive) {
+            this.close()
+          }
+        }, leaveDelay)
       }
     }
   }

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

@@ -37,10 +37,9 @@ export default {
       // trigger: 'default',
       strict: true
     },
-    // tooltipConfig: {
-    //   theme: 'dark',
-    //   enterable: false
-    // },
+    tooltipConfig: {
+      enterable: true
+    },
     validConfig: {
       showMessage: true,
       message: 'default'
@@ -244,12 +243,15 @@ export default {
   },
   form: {
     // preventSubmit: false,
+    // size: null,
+    // colon: false,
     validConfig: {
       showMessage: true,
       autoPos: true
     },
-    // size: null,
-    // colon: false,
+    tooltipConfig: {
+      enterable: true
+    },
     titleAsterisk: true
   },
   input: {

package/styles/select.scss

@@ -104,7 +104,7 @@
 
 .vxe-select-option {
   padding: 0 10px;
-  max-width: 400px;
+  max-width: 600px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/styles/tooltip.scss

@@ -7,7 +7,7 @@
   top: -100%;
   left: -100%;
   font-size: 12px;
-  max-width: 500px;
+  max-width: 600px;
   border-radius: $vxe-border-radius;
   padding: 8px 12px;
   white-space: normal;