releases 3.11.16

x-extends · Dec 3, 2024 · 99add3c · 99add3c
1 parent 0dab1ff
commit 99add3c
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 50 deletions.
diff --git a/examples/main.ts b/examples/main.ts
@@ -3,20 +3,19 @@ import App from './App.vue'
 import router from './router'
 import i18n from './i18n'
 
-// import VxeUI from 'vxe-pc-ui'
-// import 'vxe-pc-ui/lib/style.css'
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
 
-// import enUS from 'vxe-pc-ui/packages/language/en-US'
+import enUS from 'vxe-pc-ui/packages/language/en-US'
 
 import VxeTable from '../packages'
 import '../styles/all.scss'
 
 import './style/index.scss'
 
-// VxeUI.setI18n('en-US', enUS)
-// VxeUI.setLanguage((localStorage.getItem('VXE_LANGUAGE') as 'zh-CN' | 'en-US') || 'zh-CN')
+VxeUI.setI18n('en-US', enUS)
 
-// Vue.use(VxeUI)
+Vue.use(VxeUI)
 Vue.use(VxeTable)
 
 new Vue({

diff --git a/examples/views/table/TableTest1.vue b/examples/views/table/TableTest1.vue
@@ -1,37 +1,41 @@
 <template>
-  <div style="height: 400px;overflow: hidden;">
-    <vxe-table
-      border
-      stripe
-      resizable
-      highlight-hover-row
-      height="100%"
-      :padding="false"
-      :loading="demo1.loading"
-      :checkbox-config="{labelField: 'id', highlight: true, range: true}"
-      :data="demo1.tableData">
-      <vxe-column type="seq" width="60"></vxe-column>
-      <vxe-column type="checkbox" title="ID" width="140"></vxe-column>
-      <vxe-column field="role" title="Role"></vxe-column>
-      <vxe-column field="name" title="Name" sortable></vxe-column>
-      <vxe-column field="age" title="Age" :filters="ageOptions" :filter-method="filterAgeMethod">
-        <template #filter="{ $panel, column }">
-          <vxe-input class="my-input" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)" placeholder="按回车确认筛选" />
-        </template>
-      </vxe-column>
-      <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
-      <vxe-column field="address" title="Address" show-overflow></vxe-column>
+  <div>
+    <vxe-switch v-model="resizableConfig.dragMode" open-value="fixed" close-value="auto"></vxe-switch>
+    <div style="height: 400px;overflow: hidden;">
+      <vxe-table
+        border
+        stripe
+        resizable
+        highlight-hover-row
+        height="100%"
+        :padding="false"
+        :loading="demo1.loading"
+        :resizable-config="resizableConfig"
+        :checkbox-config="{labelField: 'id', highlight: true, range: true}"
+        :data="demo1.tableData">
+        <vxe-column type="seq" width="60"></vxe-column>
+        <vxe-column type="checkbox" title="ID" width="140"></vxe-column>
+        <vxe-column field="role" title="Role"></vxe-column>
+        <vxe-column field="name" title="Name" sortable></vxe-column>
+        <vxe-column field="age" title="Age" :filters="ageOptions" :filter-method="filterAgeMethod">
+          <template #filter="{ $panel, column }">
+            <vxe-input class="my-input" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)" placeholder="按回车确认筛选" />
+          </template>
+        </vxe-column>
+        <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
+        <vxe-column field="address" title="Address" show-overflow></vxe-column>
 
-      <template #loading>
-        <div>加载中。。。。。。</div>
-      </template>
-    </vxe-table>
+        <template #loading>
+          <div>加载中。。。。。。</div>
+        </template>
+      </vxe-table>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { VxeColumnPropTypes } from '../../../types'
+import { VxeColumnPropTypes, VxeTablePropTypes } from '../../../types'
 
 export default Vue.extend({
   data () {
@@ -64,6 +68,10 @@ export default Vue.extend({
       ]
     }
 
+    const resizableConfig: VxeTablePropTypes.ResizableConfig = {
+      dragMode: 'fixed'
+    }
+
     const ageOptions: VxeColumnPropTypes.Filters = [
       { data: '' }
     ]
@@ -79,6 +87,7 @@ export default Vue.extend({
 
     return {
       demo1,
+      resizableConfig,
       ageOptions,
       formatterSex,
       filterAgeMethod

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.11.15",
+  "version": "3.11.16",
   "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": "^3.3.14"
+    "vxe-pc-ui": "~3.3.15"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.25.7",

diff --git a/packages/table/src/header.ts b/packages/table/src/header.ts
@@ -269,14 +269,23 @@ export default {
       this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : []
     },
     resizeMousedown (evnt: any, params: any) {
+      const $xeTable = this.$parent
+      const tableInternalData = $xeTable
+
       const { column } = params
-      const { $parent: $xetable, $el, fixedType } = this
-      const { tableBody, leftContainer, rightContainer, resizeBar: resizeBarElem } = $xetable.$refs
+      const { $parent: $xetable, fixedType } = this
+      const { visibleColumn } = tableInternalData
+      const { tableBody, leftContainer, rightContainer } = $xetable.$refs
+      const tableEl = $xeTable.$el as HTMLDivElement
+      const resizeBarElem = $xetable.$refs.resizeBar as HTMLDivElement
+      const resizeTipElem = $xetable.$refs.refCellResizeTip as HTMLDivElement
+      const wrapperElem = this.$el as HTMLDivElement
       const { target: dragBtnElem, clientX: dragClientX } = evnt
       const cell = params.cell = dragBtnElem.parentNode
+      const resizableOpts = $xeTable.computeResizableOpts
       let dragLeft = 0
       const tableBodyElem = tableBody.$el
-      const pos = getOffsetPos(dragBtnElem, $el)
+      const pos = getOffsetPos(dragBtnElem, tableEl)
       const dragBtnWidth = dragBtnElem.clientWidth
       const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2)
       const minInterval = getColReMinWidth(params) - dragBtnOffsetWidth // 列之间的最小间距
@@ -324,7 +333,24 @@ export default {
           // left = Math.min(left, tableBodyElem.clientWidth + tableBodyElem.scrollLeft - 40)
         }
         dragLeft = Math.max(left, dragMinLeft)
-        resizeBarElem.style.left = `${dragLeft - scrollLeft}px`
+        const resizeBarLeft = dragLeft - scrollLeft
+        resizeBarElem.style.left = `${resizeBarLeft}px`
+        if (resizableOpts.showDragTip && resizeTipElem) {
+          const tableWidth = tableEl.clientWidth
+          const wrapperRect = wrapperElem.getBoundingClientRect()
+          const resizeBarWidth = resizeBarElem.clientWidth
+          const resizeTipWidth = resizeTipElem.clientWidth
+          const resizeTipHeight = resizeTipElem.clientHeight
+          let resizeTipLeft = -resizeTipWidth
+          if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
+            resizeTipLeft = resizeTipWidth + resizeBarWidth - resizeBarLeft
+          } else if (resizeBarLeft > tableWidth) {
+            resizeTipLeft += tableWidth - resizeBarLeft
+          }
+          resizeTipElem.style.left = `${resizeTipLeft}px`
+          resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
+          resizeTipElem.textContent = `${column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)}px`
+        }
       }
 
       $xetable._isResize = true
@@ -336,6 +362,15 @@ export default {
         document.onmouseup = domMouseup
         const resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
         column.resizeWidth = resizeWidth
+        if (resizableOpts.dragMode === 'fixed') {
+          visibleColumn.forEach((item: any) => {
+            if (item.id !== column.id) {
+              if (!item.resizeWidth) {
+                item.resizeWidth = item.renderWidth
+              }
+            }
+          })
+        }
         resizeBarElem.style.display = 'none'
         $xetable._isResize = false
         $xetable._lastResizeTime = Date.now()

diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
@@ -1170,6 +1170,7 @@ export default {
       rowOpts,
       checkboxOpts,
       loadingOpts,
+      resizableOpts,
       editRules
     } = $xeTable
     const { leftList, rightList } = columnStore
@@ -1348,7 +1349,14 @@ export default {
             }
           : {},
         ref: 'resizeBar'
-      }),
+      }, resizableOpts.showDragTip
+        ? [
+            h('div', {
+              ref: 'refCellResizeTip',
+              class: 'vxe-table--resizable-number-tip'
+            }, '23432px')
+          ]
+        : []),
       /**
        * 加载中
        */

diff --git a/packages/table/src/util.ts b/packages/table/src/util.ts
@@ -116,7 +116,7 @@ function getPaddingLeftRightSize (elem: any) {
   return 0
 }
 
-function getElemenMarginWidth (elem: any) {
+function getElementMarginWidth (elem: any) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const marginLeft = XEUtils.toNumber(computedStyle.marginLeft)
@@ -215,14 +215,15 @@ export function getColReMinWidth (params: any) {
   let mWidth = minTitleWidth + paddingLeftRight
   // 默认最小宽处理
   if (hasEllipsis) {
-    const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '--title>.vxe-cell--checkbox'))
-    const requiredIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'))
-    const editIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'))
-    const prefixIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'))
-    const suffixIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'))
-    const sortIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'))
-    const filterIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'))
-    mWidth += checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth
+    const dragIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--drag-handle'))
+    const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--checkbox'))
+    const requiredIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'))
+    const editIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'))
+    const prefixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'))
+    const suffixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'))
+    const sortIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'))
+    const filterIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'))
+    mWidth += dragIconWidth + checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth
   }
   // 如果设置最小宽
   if (colMinWidth) {

diff --git a/packages/ui/index.ts b/packages/ui/index.ts
@@ -39,6 +39,10 @@ VxeUI.setConfig({
     resizeConfig: {
       // refreshDelay: 250
     },
+    resizableConfig: {
+      dragMode: 'auto',
+      showDragTip: true
+    },
     radioConfig: {
       // trigger: 'default'
       strict: true
@@ -62,7 +66,7 @@ VxeUI.setConfig({
       autoPos: true,
       message: 'inline',
       msgMode: 'single',
-      theme: 'normal'
+      theme: 'beautify'
     },
     columnConfig: {
       maxFixedSize: 4

diff --git a/styles/components/table.scss b/styles/components/table.scss
@@ -1112,6 +1112,16 @@
       height: 100%;
       background-color: var(--vxe-ui-table-resizable-drag-line-color);
     }
+    .vxe-table--resizable-number-tip {
+      position: absolute;
+      left: 0;
+      top: 1em;
+      padding: 0.25em 0.25em;
+      font-size: 12px;
+      border-radius: var(--vxe-ui-border-radius);
+      color: #ffffff;
+      background-color: var(--vxe-ui-table-resizable-drag-line-color);
+    }
   }
 
   /*边框线*/