releases 4.10.6

examples/views/table/TableTest3.vue

@@ -13,6 +13,7 @@
       :row-config="rowConfig"
       :column-config="{useKey: true}"
       :column-drag-config="{isCrossDrag:true,isToChildDrag:true,isSelfToChildDrag:true}"
+      :resizable-config="resizableConfig"
       :print-config="{}"
       :import-config="{}"
       :export-config="{}"
@@ -61,6 +62,10 @@ const rowConfig = reactive<VxeTablePropTypes.RowConfig>({
   resizable: true
 })
 
+const resizableConfig = reactive<VxeTablePropTypes.ResizableConfig>({
+  isDblclickAutoHeight: true
+})
+
 const demo1 = reactive({
   loading: false,
   tableData: [] as any[],

examples/views/table/TableTest8.vue

@@ -8,12 +8,13 @@
       height="800"
       :loading="loading"
       :column-config="{resizable: true,drag: true}"
-      :row-config="{drag: true}"
+      :row-config="{resizable: true,drag: true}"
       :scroll-x="{enabled: true, gt: 0}"
       :scroll-y="{enabled: true, gt: 0}"
+      :checkbox-config="{ highlight: true, range: true}"
       :data="tableData"
       :footer-data="footerData">
-      <vxe-column field="checkbox" type="checkbox" width="80" fixed="left" drag-sort></vxe-column>
+      <vxe-column field="checkbox" type="checkbox" width="80" fixed="left" drag-sort row-resize></vxe-column>
       <vxe-column field="col0" title="列0" width="100" fixed="left"></vxe-column>
       <vxe-column field="imgUrl" title="列1" width="80" fixed="left" :cell-render="imgUrlCellRender"></vxe-column>
       <vxe-column field="col2" title="列2" width="90"></vxe-column>

examples/views/table/TableTest9.vue

@@ -16,13 +16,14 @@
       height="800"
       :loading="loading"
       :column-config="{resizable: true,drag: true}"
-      :row-config="{drag: true}"
+      :row-config="{resizable: true,drag: true}"
       :scroll-x="{enabled: true, gt: 0}"
       :scroll-y="{enabled: true, gt: 0}"
       :scrollbar-config="{x:{position:'top'},y:{position:'left'}}"
+      :checkbox-config="{ highlight: true, range: true}"
       :data="tableData"
       :footer-data="footerData">
-      <vxe-column field="checkbox" type="checkbox" width="80" fixed="left" drag-sort></vxe-column>
+      <vxe-column field="checkbox" type="checkbox" width="80" fixed="left" drag-sort row-resize></vxe-column>
       <vxe-column field="col0" title="列0" fixed="left" width="100"></vxe-column>
       <vxe-column field="imgUrl" title="列1" width="80" :cell-render="imgUrlCellRender"></vxe-column>
       <vxe-column field="col2" title="列2" width="90"></vxe-column>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.10.6-beta.15",
+  "version": "4.10.6-beta.20",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.3.74"
+    "vxe-pc-ui": "^4.3.75"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/table/module/edit/hook.ts

@@ -251,7 +251,7 @@ hooks.add('tableEditModule', {
         const rowid = getRowid($xeTable, newRow)
         insertMaps[rowid] = newRow
       })
-      $xeTable.cacheRowMap()
+      $xeTable.cacheRowMap(false)
       $xeTable.updateScrollYStatus()
       $xeTable.handleTableData(treeConfig && transform)
       if (!(treeConfig && transform)) {
@@ -469,7 +469,7 @@ hooks.add('tableEditModule', {
         editStore.insertMaps = insertDataRowMaps
         reactData.pendingRowMaps = pendingDataRowMaps
         $xeTable.updateFooter()
-        $xeTable.cacheRowMap()
+        $xeTable.cacheRowMap(false)
         $xeTable.handleTableData(treeConfig && transform)
         if (!(treeConfig && transform)) {
           $xeTable.updateAfterDataIndex()

packages/table/module/export/hook.ts

@@ -944,6 +944,45 @@ hooks.add('tableExportModule', {
       })
     }
 
+    const handleFilterColumns = (exportOpts: VxeTablePropTypes.ExportConfig, column: VxeTableDefines.ColumnInfo, columns: VxeTableDefines.ColumnInfo[] | VxeTablePropTypes.ExportOrPrintColumnOption[]) => {
+      return columns.some((item: any) => {
+        if (isColumnInfo(item)) {
+          return column.id === (item as any).id
+        } else if (XEUtils.isString(item)) {
+          return column.field === item
+        } else {
+          const colid = item.id || item.colId
+          const type = item.type
+          const field = item.field
+          if (colid) {
+            return column.id === colid
+          } else if (field && type) {
+            return column.field === field && column.type === type
+          } else if (field) {
+            return column.field === field
+          } else if (type) {
+            return column.type === type
+          }
+        }
+        return false
+      })
+    }
+
+    const handleFilterFields = (exportOpts: VxeTablePropTypes.ExportConfig, column: VxeTableDefines.ColumnInfo, includeFields: string[] | undefined, excludeFields: string[] | undefined) => {
+      if (excludeFields) {
+        if (XEUtils.includes(excludeFields, column.field)) {
+          return false
+        }
+      }
+      if (includeFields) {
+        if (XEUtils.includes(includeFields, column.field)) {
+          return true
+        }
+        return false
+      }
+      return exportOpts.original ? column.field : defaultFilterExportColumn(column)
+    }
+
     const handleExportAndPrint = (options: VxeTablePropTypes.ExportOpts | VxeTablePropTypes.ExportConfig, isPrint?: boolean) => {
       const { treeConfig, showHeader, showFooter } = props
       const { initStore, mergeList, mergeFooterList, isGroup, footerTableData, exportStore, exportParams } = reactData
@@ -969,7 +1008,7 @@ hooks.add('tableExportModule', {
       const modes: string[] = defOpts.modes || []
       const checkMethod = customOpts.checkMethod
       const exportColumns = collectColumn.slice(0)
-      const { columns } = defOpts
+      const { columns, excludeFields, includeFields } = defOpts
       // 处理类型
       const typeList = types.map((value) => {
         return {
@@ -992,33 +1031,17 @@ hooks.add('tableExportModule', {
       // 默认选中
       XEUtils.eachTree(exportColumns, (column, index, items, path, parent) => {
         const isColGroup = column.children && column.children.length
-        if (isColGroup || defaultFilterExportColumn(column)) {
-          column.checked = columns
-            ? columns.some((item: any) => {
-              if (isColumnInfo(item)) {
-                return column.id === item.id
-              } else if (XEUtils.isString(item)) {
-                return column.field === item
-              } else {
-                const colid = item.id || item.colId
-                const type = item.type
-                const field = item.field
-                if (colid) {
-                  return column.id === colid
-                } else if (field && type) {
-                  return column.field === field && column.type === type
-                } else if (field) {
-                  return column.field === field
-                } else if (type) {
-                  return column.type === type
-                }
-              }
-              return false
-            })
-            : column.visible
-          column.halfChecked = false
-          column.disabled = (parent && parent.disabled) || (checkMethod ? !checkMethod({ column }) : false)
+        let isChecked = false
+        if (columns && columns.length) {
+          isChecked = handleFilterColumns(defOpts, column, columns)
+        } else if (excludeFields || includeFields) {
+          isChecked = handleFilterFields(defOpts, column, includeFields, excludeFields)
+        } else {
+          isChecked = column.visible && (isColGroup || defaultFilterExportColumn(column))
         }
+        column.checked = isChecked
+        column.halfChecked = false
+        column.disabled = (parent && parent.disabled) || (checkMethod ? !checkMethod({ column }) : false)
       })
       // 更新条件
       Object.assign(exportStore, {

packages/table/module/keyboard/hook.ts

@@ -33,33 +33,61 @@ hooks.add('tableKeyboardModule', {
   setupTable ($xeTable) {
     const { props, reactData, internalData } = $xeTable
     const { refElem } = $xeTable.getRefMaps()
-    const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
 
     function getCheckboxRangeRows (evnt: MouseEvent, params: any, targetTrElem: HTMLElement, trRect: DOMRect, offsetClientTop: number, moveRange: number) {
+      const { showOverflow } = props
+      const { fullAllDataRowIdData, isResizeCellHeight } = internalData
+      const rowOpts = computeRowOpts.value
+      const cellOpts = computeCellOpts.value
+      const defaultRowHeight = computeDefaultRowHeight.value
+      const { row } = params
       let countHeight = 0
       let rangeRows: any[] = []
       let moveSize = 0
       const isDown = moveRange > 0
-      const { scrollYLoad, rowHeight } = reactData
+      const { scrollYLoad } = reactData
       const { afterFullData } = internalData
+      if (isDown) {
+        moveSize = offsetClientTop + moveRange
+      } else {
+        moveSize = (trRect.height - offsetClientTop) + Math.abs(moveRange)
+      }
       if (scrollYLoad) {
-        if (isDown) {
-          moveSize = offsetClientTop + moveRange
-        } else {
-          moveSize = (trRect.height - offsetClientTop) + Math.abs(moveRange)
-        }
-        const _rowIndex = $xeTable.getVTRowIndex(params.row)
-        if (isDown) {
-          rangeRows = afterFullData.slice(_rowIndex, _rowIndex + Math.ceil(moveSize / rowHeight))
+        const _rowIndex = $xeTable.getVTRowIndex(row)
+        const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
+        if (!isCustomCellHeight && showOverflow) {
+          if (isDown) {
+            rangeRows = afterFullData.slice(_rowIndex, _rowIndex + Math.ceil(moveSize / defaultRowHeight))
+          } else {
+            rangeRows = afterFullData.slice(_rowIndex - Math.floor(moveSize / defaultRowHeight), _rowIndex + 1)
+          }
         } else {
-          rangeRows = afterFullData.slice(_rowIndex - Math.floor(moveSize / rowHeight), _rowIndex + 1)
+          if (isDown) {
+            for (let i = _rowIndex; i < afterFullData.length; i++) {
+              const item = afterFullData[i]
+              const rowid = $xeTable.getRowid(item)
+              const rowRest = fullAllDataRowIdData[rowid] || {}
+              countHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || defaultRowHeight
+              rangeRows.push(item)
+              if (countHeight > moveSize) {
+                return rangeRows
+              }
+            }
+          } else {
+            for (let len = _rowIndex; len >= 0; len--) {
+              const item = afterFullData[len]
+              const rowid = $xeTable.getRowid(item)
+              const rowRest = fullAllDataRowIdData[rowid] || {}
+              countHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || defaultRowHeight
+              rangeRows.push(item)
+              if (countHeight > moveSize) {
+                return rangeRows
+              }
+            }
+          }
         }
       } else {
-        if (isDown) {
-          moveSize = evnt.clientY - trRect.y
-        } else {
-          moveSize = trRect.y - evnt.clientY + trRect.height
-        }
         const siblingProp = isDown ? 'next' : 'previous'
         while (targetTrElem && countHeight < moveSize) {
           const rowNodeRest = $xeTable.getRowNode(targetTrElem)
@@ -74,19 +102,25 @@ hooks.add('tableKeyboardModule', {
     }
 
     const handleCheckboxRangeEvent = (evnt: any, params: any) => {
+      const { elemStore } = internalData
+      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+      const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+      const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
       const { column, cell } = params
       if (column.type === 'checkbox') {
-        const el = refElem.value
-        const { elemStore } = internalData
-        const disX = evnt.clientX
-        const disY = evnt.clientY
-        const bodyWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper'])
+        let bodyWrapperElem = bodyScrollElem as HTMLElement
+        if (leftScrollElem && column.fixed === 'left') {
+          bodyWrapperElem = leftScrollElem
+        } else if (rightScrollElem && column.fixed === 'right') {
+          bodyWrapperElem = rightScrollElem
+        }
         if (!bodyWrapperElem) {
           return
         }
+        const el = refElem.value
+        const disX = evnt.clientX
+        const disY = evnt.clientY
         const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range') as HTMLElement
-        const domMousemove = document.onmousemove
-        const domMouseup = document.onmouseup
         const trElem = cell.parentElement as HTMLElement
         const selectRecords = $xeTable.getCheckboxRecords()
         let lastRangeRows: any[] = []
@@ -215,8 +249,8 @@ hooks.add('tableKeyboardModule', {
           stopMouseScroll()
           removeClass(el, 'drag--range')
           checkboxRangeElem.removeAttribute('style')
-          document.onmousemove = domMousemove
-          document.onmouseup = domMouseup
+          document.onmousemove = null
+          document.onmouseup = null
           triggerEvent('end', evnt)
         }
         triggerEvent('start', evnt)