自适应列宽支持头部和尾部 #2474

x-extends · Jul 15, 2024 · 3ca16bb · 3ca16bb
1 parent 687e75c
commit 3ca16bb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/examples/views/table/TableTest5.vue b/examples/views/table/TableTest5.vue
@@ -4,18 +4,20 @@
       border
       stripe
       resizable
-      highlight-hover-row
+      show-footer
       height="400"
+      :row-config="{isHover: true}"
       :loading="demo1.loading"
       :checkbox-config="{labelField: 'id', highlight: true, range: true}"
-      :data="demo1.tableData">
+      :data="demo1.tableData"
+      :footer-data="demo1.footerData">
       <vxe-column type="seq" width="auto"></vxe-column>
       <vxe-column type="checkbox" title="ID" width="auto"></vxe-column>
       <vxe-column field="role" title="Role" width="auto"></vxe-column>
-      <vxe-column field="name" title="Name" width="auto"></vxe-column>
+      <vxe-column field="name" title="Name Name Name Name Name" width="auto"></vxe-column>
       <vxe-column field="age" title="Age" width="auto"></vxe-column>
       <vxe-column field="sex" title="Sex" width="auto"></vxe-column>
-      <vxe-column field="address" title="Address" width="auto" show-overflow></vxe-column>
+      <vxe-column field="address" title="Address Address Address" width="auto" show-overflow></vxe-column>
     </vxe-table>
   </div>
 </template>
@@ -25,7 +27,10 @@ import { onMounted, reactive } from 'vue'
 
 const demo1 = reactive({
   loading: false,
-  tableData: [] as any[]
+  tableData: [] as any[],
+  footerData: [
+    { name: 'xxx xxx x xxx xxx xxxx xxx xxxx xxx xxxx xxx xxxx xxx xxxx xxx x', address: 'xxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xx' }
+  ]
 })
 
 onMounted(() => {

diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
@@ -1103,7 +1103,7 @@ export default defineComponent({
         const el = refElem.value
         if (el) {
           autoWidthColumnList.forEach(column => {
-            const cellElList = el.querySelectorAll(`.vxe-body--column.${column.id}>.vxe-cell`)
+            const cellElList = el.querySelectorAll(`.vxe-header--column.${column.id}>.vxe-cell,.vxe-body--column.${column.id}>.vxe-cell,.vxe-footer--column.${column.id}>.vxe-cell`)
             const firstCellEl = cellElList[0]
             let paddingSize = 0
             if (firstCellEl) {

diff --git a/styles/components/table.scss b/styles/components/table.scss
@@ -319,7 +319,8 @@
 .vxe-table {
   &.column--calc {
     .vxe-header--column,
-    .vxe-body--column {
+    .vxe-body--column,
+    .vxe-footer--column {
       .vxe-cell {
         word-break: break-all;
         white-space: nowrap;
@@ -644,6 +645,13 @@
       user-select: none;
     }
   }
+  &.checkbox--range {
+    .vxe-body--column {
+      &.col--checkbox {
+        user-select: none;
+      }
+    }
+  }
   .vxe-header--column,
   .vxe-body--column,
   .vxe-footer--column {