releases 4.9.13

x-extends · Dec 3, 2024 · 7907564 · 7907564
1 parent 15f14a2
commit 7907564
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 49 deletions.
diff --git a/examples/main.ts b/examples/main.ts
@@ -2,20 +2,20 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-// 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.setI18n('en-US', enUS)
 
 createApp(App)
   .use(router)
-  // .use(VxeUI)
+  .use(VxeUI)
   .use(VxeTable)
   .mount('#app')
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" setup>
 import { onMounted, reactive, ref } from 'vue'
-import { VxeColumnPropTypes } from '../../../types'
+import { VxeColumnPropTypes, VxeTablePropTypes } from '../../../types'
 
 const ageOptions = ref<VxeColumnPropTypes.Filters>([
   { data: '' }
@@ -66,6 +70,10 @@ const demo1 = reactive({
   ]
 })
 
+const resizableConfig = reactive<VxeTablePropTypes.ResizableConfig>({
+  dragMode: 'fixed'
+})
+
 const formatterSex: VxeColumnPropTypes.Formatter = ({ cellValue }) => {
   const item = demo1.sexList.find(item => item.value === cellValue)
   return item ? item.label : ''

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.9.12",
+  "version": "4.9.13",
   "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.11"
+    "vxe-pc-ui": "~4.3.12"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

diff --git a/packages/table/src/header.ts b/packages/table/src/header.ts
@@ -26,8 +26,8 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { refElem: tableRefElem, refTableBody, refLeftContainer, refRightContainer, refCellResizeBar } = $xeTable.getRefMaps()
-    const { computeColumnOpts } = $xeTable.getComputeMaps()
+    const { refElem: tableRefElem, refTableBody, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip } = $xeTable.getRefMaps()
+    const { computeColumnOpts, computeResizableOpts } = $xeTable.getComputeMaps()
 
     const headerColumn = ref([] as VxeTableDefines.ColumnInfo[][])
 
@@ -46,10 +46,14 @@ export default defineComponent({
     const resizeMousedown = (evnt: MouseEvent, params: any) => {
       const { column } = params
       const { fixedType } = props
+      const { visibleColumn } = tableInternalData
+      const resizableOpts = computeResizableOpts.value
       const tableBody = refTableBody.value
+      const tableEl = tableRefElem.value
       const leftContainerElem = refLeftContainer.value
       const rightContainerElem = refRightContainer.value
       const resizeBarElem = refCellResizeBar.value
+      const resizeTipElem = refCellResizeTip.value
       const { clientX: dragClientX } = evnt
       const wrapperElem = refElem.value
       const dragBtnElem = evnt.target as HTMLDivElement
@@ -66,7 +70,6 @@ export default defineComponent({
       const domMouseup = document.onmouseup
       const isLeftFixed = fixedType === 'left'
       const isRightFixed = fixedType === 'right'
-      const tableEl = tableRefElem.value
 
       // 计算左右侧固定列偏移量
       let fixedOffsetWidth = 0
@@ -105,7 +108,24 @@ export default defineComponent({
           // 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`
+        }
       }
 
       tableReactData._isResize = true
@@ -117,6 +137,15 @@ export default defineComponent({
         document.onmouseup = domMouseup
         const resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
         column.resizeWidth = resizeWidth
+        if (resizableOpts.dragMode === 'fixed') {
+          visibleColumn.forEach(item => {
+            if (item.id !== column.id) {
+              if (!item.resizeWidth) {
+                item.resizeWidth = item.renderWidth
+              }
+            }
+          })
+        }
         resizeBarElem.style.display = 'none'
         tableReactData._isResize = false
         tableInternalData._lastResizeTime = Date.now()

diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
@@ -374,6 +374,7 @@ export default defineComponent({
     const refLeftContainer = ref() as Ref<HTMLDivElement>
     const refRightContainer = ref() as Ref<HTMLDivElement>
     const refCellResizeBar = ref() as Ref<HTMLDivElement>
+    const refCellResizeTip = ref() as Ref<HTMLDivElement>
     const refEmptyPlaceholder = ref() as Ref<HTMLDivElement>
 
     const refDragTipElem = ref<HTMLDivElement>()
@@ -695,6 +696,7 @@ export default defineComponent({
       refLeftContainer,
       refRightContainer,
       refCellResizeBar,
+      refCellResizeTip,
       refScrollXVirtualElem,
       refScrollYVirtualElem,
       refScrollXHandleElem,
@@ -7771,6 +7773,7 @@ export default defineComponent({
       const isMenu = computeIsMenu.value
       const currLoading = reactData._isLoading || loading
       const virtualScrollBars = computeVirtualScrollBars.value
+      const resizableOpts = computeResizableOpts.value
       const isArea = mouseConfig && mouseOpts.area
       return h('div', {
         ref: refElem,
@@ -7925,7 +7928,14 @@ export default defineComponent({
                 'padding-bottom': `${scrollbarHeight}px`
               }
             : null
-        }),
+        }, 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
@@ -124,7 +124,7 @@ function getPaddingLeftRightSize (elem: HTMLElement | null) {
   return 0
 }
 
-function getElemenMarginWidth (elem: HTMLElement | null) {
+function getElementMarginWidth (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const marginLeft = XEUtils.toNumber(computedStyle.marginLeft)
@@ -233,14 +233,15 @@ export function getColReMinWidth (params: {
   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);
+    }
   }
 
   /*边框线*/