diff --git a/examples/views/table/TableTest5.vue b/examples/views/table/TableTest5.vue
index ebcb0a4d0d..4cc064b481 100644
--- a/examples/views/table/TableTest5.vue
+++ b/examples/views/table/TableTest5.vue
@@ -11,13 +11,17 @@
:checkbox-config="{labelField: 'id', highlight: true, range: true}"
:data="demo1.tableData"
:footer-data="demo1.footerData">
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index 75c9e73d3a..1027ecb236 100644
--- a/package.json
+++ b/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",
diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
index e11360a40d..28e095e942 100644
--- a/packages/table/src/table.ts
+++ b/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