fix 修复列宽计算逻辑 #2557

x-extends · Sep 19, 2024 · af2fb24 · af2fb24
1 parent 5c67407
commit af2fb24
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/examples/views/table/TableTest5.vue b/examples/views/table/TableTest5.vue
@@ -13,8 +13,16 @@
       :data="demo1.tableData"
       :footer-data="demo1.footerData">
       <vxe-column type="seq" min-width="auto"></vxe-column>
-      <vxe-column type="checkbox" title="ID" min-width="auto"></vxe-column>
-      <vxe-column field="role" title="Role" min-width="auto"></vxe-column>
+      <vxe-column type="checkbox" title="ID"  min-width="auto"></vxe-column>
+      <vxe-column
+        field="role"
+        title="Role sdf sdf dsfsdf dfs sfd gfd fdg gfdddgdfgd "
+        min-width="auto"
+        sortable
+        :filters="roleOptions"
+        :title-prefix="{content: 'sdf', icon: 'vxe-icon-edit'}"
+        :title-suffix="{content: 'sdf', icon: 'vxe-icon-edit'}">
+      </vxe-column>
       <vxe-column field="name" title="Name Name Name Name Name" min-width="auto"></vxe-column>
       <vxe-column field="age" title="Age" min-width="auto"></vxe-column>
       <vxe-column field="sex" title="Sex" min-width="auto">
@@ -28,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { VxeTablePropTypes } from '../../../types'
 
 const demo1 = reactive({
@@ -79,6 +87,10 @@ const menuConfig = reactive<VxeTablePropTypes.MenuConfig>({
   }
 })
 
+const roleOptions = ref([
+  { label: 'Test', value: 'Test' }
+])
+
 onMounted(() => {
   demo1.loading = true
   setTimeout(() => {

diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
@@ -1132,10 +1132,20 @@ export default defineComponent({
               paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2
             }
             let colWidth = column.renderAutoWidth - paddingSize
-            XEUtils.arrayEach(cellElList, (cellEl) => {
-              const labelEl = cellEl.firstChild as HTMLElement
-              if (labelEl) {
-                colWidth = Math.max(colWidth, Math.ceil(labelEl.offsetWidth) + 4)
+            XEUtils.arrayEach(cellElList, (itemEl) => {
+              const cellEl = itemEl as HTMLElement
+              const thElem = cellEl.parentNode as HTMLElement
+              let titleWidth = 0
+              if (`${thElem.tagName}`.toLowerCase() === 'th') {
+                XEUtils.arrayEach(cellEl.children, (btnEl) => {
+                  titleWidth += (btnEl as HTMLElement).offsetWidth + 1
+                })
+              } else {
+                const labelEl = cellEl.firstChild as HTMLElement
+                titleWidth = labelEl.offsetWidth
+              }
+              if (titleWidth) {
+                colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4)
               }
             })
             column.renderAutoWidth = colWidth + paddingSize

diff --git a/styles/components/table.scss b/styles/components/table.scss
@@ -456,12 +456,12 @@
   //   vertical-align: middle;
   // }
   .vxe-cell--required-icon {
-    margin-right: 0.1em;
+    padding-right: 0.1em;
   }
   .vxe-cell--edit-icon,
   .vxe-cell-title-prefix-icon,
   .vxe-cell-title-suffix-icon {
-    margin-right: 0.2em;
+    padding: 0.2em;
   }
   .vxe-cell-title-prefix-icon,
   .vxe-cell-title-suffix-icon {