releases 4.7.64

examples/views/table/TableTest5.vue

@@ -11,13 +11,17 @@
       :checkbox-config="{labelField: 'id', highlight: true, range: true}"
       :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 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 Address Address" width="auto" show-overflow></vxe-column>
+      <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 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">
+        <template #default="{ row }">
+          <vxe-input v-model="row.sex"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column field="address" title="Address Address Address" min-width="auto" show-overflow></vxe-column>
     </vxe-table>
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.7.63",
+  "version": "4.7.64",
   "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.0.92"
+    "vxe-pc-ui": "^4.0.93"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/table/src/table.ts

@@ -154,6 +154,7 @@ export default defineComponent({
         resizeList: [],
         pxList: [],
         pxMinList: [],
+        autoMinList: [],
         scaleList: [],
         scaleMinList: [],
         autoList: [],
@@ -552,7 +553,8 @@ export default defineComponent({
 
     const computeAutoWidthColumnList = computed(() => {
       const { visibleColumn } = internalData
-      return visibleColumn.filter(column => column.width === 'auto')
+      const { tableColumn } = reactData
+      return tableColumn.length || visibleColumn.length ? visibleColumn.filter(column => column.width === 'auto' || column.minWidth === 'auto') : []
     })
 
     const computeFixedColumnSize = computed(() => {
@@ -1123,11 +1125,11 @@ export default defineComponent({
               const cellStyle = getComputedStyle(firstCellEl)
               paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2
             }
-            let colWidth = column.renderAutoWidth - paddingSize + 2
+            let colWidth = column.renderAutoWidth - paddingSize
             XEUtils.arrayEach(cellElList, (cellEl) => {
               const labelEl = cellEl.firstChild as HTMLElement
               if (labelEl) {
-                colWidth = Math.max(colWidth, labelEl.offsetWidth)
+                colWidth = Math.max(colWidth, Math.ceil(labelEl.offsetWidth) + 4)
               }
             })
             column.renderAutoWidth = colWidth + paddingSize
@@ -1161,13 +1163,19 @@ export default defineComponent({
       let meanWidth = remainWidth / 100
       const { fit } = props
       const { columnStore } = reactData
-      const { resizeList, pxMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore
+      const { resizeList, pxMinList, autoMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore
       // 最小宽
       pxMinList.forEach((column) => {
         const minWidth = XEUtils.toInteger(column.minWidth)
         tableWidth += minWidth
         column.renderWidth = minWidth
       })
+      // 最小自适应
+      autoMinList.forEach((column) => {
+        const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
+        tableWidth += scaleWidth
+        column.renderWidth = scaleWidth
+      })
       // 最小百分比
       scaleMinList.forEach((column) => {
         const scaleWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth)
@@ -1199,10 +1207,10 @@ export default defineComponent({
         column.renderWidth = width
       })
       remainWidth -= tableWidth
-      meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + remainList.length)) : 0
+      meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0
       if (fit) {
         if (remainWidth > 0) {
-          scaleMinList.concat(pxMinList).forEach((column) => {
+          scaleMinList.concat(pxMinList).concat(autoMinList).forEach((column) => {
             tableWidth += meanWidth
             column.renderWidth += meanWidth
           })
@@ -1221,7 +1229,7 @@ export default defineComponent({
          * 偏移量算法
          * 如果所有列足够放的情况下，从最后动态列开始分配
          */
-        const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(remainList)
+        const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList)
         let dynamicSize = dynamicList.length - 1
         if (dynamicSize > 0) {
           let odiffer = bodyWidth - tableWidth
@@ -5484,6 +5492,7 @@ export default defineComponent({
         const resizeList: VxeTableDefines.ColumnInfo[] = []
         const pxList: VxeTableDefines.ColumnInfo[] = []
         const pxMinList: VxeTableDefines.ColumnInfo[] = []
+        const autoMinList: VxeTableDefines.ColumnInfo[] = []
         const scaleList: VxeTableDefines.ColumnInfo[] = []
         const scaleMinList: VxeTableDefines.ColumnInfo[] = []
         const autoList: VxeTableDefines.ColumnInfo[] = []
@@ -5506,6 +5515,8 @@ export default defineComponent({
               scaleList.push(column)
             } else if (isPx(column.minWidth)) {
               pxMinList.push(column)
+            } else if (column.minWidth === 'auto') {
+              autoMinList.push(column)
             } else if (isScale(column.minWidth)) {
               scaleMinList.push(column)
             } else {
@@ -5513,7 +5524,7 @@ export default defineComponent({
             }
           }
         })
-        Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, scaleList, scaleMinList, autoList, remainList })
+        Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, autoMinList, scaleList, scaleMinList, autoList, remainList })
       },
       saveCustomStore (type) {
         const tableId = computeTableId.value