element plus table 表格操作列根据按钮数量自适应宽度

直接上代码
在utils直接封装autoWidthHeaderRender.js文件

/*** 表格操作列自适应宽度计算函数* @param {string} className - 操作栏容器类名* @param {number} padding - 额外padding宽度* @param {number} minWidth - 最小宽度* @returns {number} 计算后的宽度*/
export const calculateOperationWidth = (className = 'operation-cell', padding = 30, minWidth = 120) => {try {const cells = document.getElementsByClassName(className)let maxWidth = minWidthArray.from(cells).forEach(cell => {if (cell.offsetParent !== null) { // 只计算可见元素const buttons = cell.querySelectorAll('.el-button')let totalWidth = 0buttons.forEach(button => {// 计算每个按钮的宽度（包括margin）const style = window.getComputedStyle(button)const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight)totalWidth += button.offsetWidth + margin})maxWidth = Math.max(maxWidth, totalWidth + padding)}})return maxWidth} catch (error) {console.error('操作栏宽度计算错误:', error)return minWidth}
}

页面里使用 增加class style

<el-tableref="tableRef"borderv-loading="loading":data="customerList"@selection-change="handleSelectionChange">
<el-table-columnlabel="操作"align="center"class-name="small-padding fixed-width":width="operationWidth"fixed="right"><template #default="scope"><divclass="operation-cell"style="white-space: nowrap; display: inline-block"><el-buttonlinktype="primary"icon="Memo"v-if="scope.row.openAccStatus == 'OPENING_ACC'"@click="handleValid(scope.row)"v-hasPermi="['business:company:valid']">去验证</el-button></div></template></el-table-column></el-table>
import { calculateOperationWidth } from '@/utils/autoWidthHeaderRender'const operationWidth = ref(120)// 计算并更新操作列宽度
const updateOperationWidth = async () => {await nextTick() // 确保DOM已更新operationWidth.value = calculateOperationWidth('operation-cell', 30, 120)
}// 监听数据变化
watch(() => customerList.value, updateOperationWidth, {deep: true,immediate: true,
})

这样就可以自适应宽度了，大体思路是这样