el-table自适应列宽实现-编程知识

el-table自适应列宽实现

【背景小记】

el-table的el-table-column如果不指定width的话，会自动设定一个宽度，表格内容会自动换行，对强迫症用户来说非常不友好，为了追求完美用户体验，所以这里需要实现两个效果：

1. 强制表格内容不换行显示

2. 实现表格列宽自适应撑开

【代码实现】

<template><el-table ref="tableRef" v-loading="loading" :data="tableData" border stripe :header-cell-style="MyHeaderCellStyle" :cell-style="MyCellStyle" show-summary :summary-method="accountSummaries2" :height="TableHeight"><el-table-column label="序号" type="index" align="center" fixed /><el-table-column label="单位" prop="branch_name" align="center" fixed sortable sort-by="branch_no" :width="flexColumnWidth('单位','branch_name')" /><el-table-column v-for="item in headerData" :key="item.name" :label="item.name" align="center"><el-table-column v-for="obj in item.children" :key="obj.prop" :label="obj.label" :prop="obj.prop" align="center" sortable :formatter="handleFormatter" /></el-table-column></el-table>
</template>

给需要自适应列宽的column写一个动态的width

 :width="flexColumnWidth(label,prop)"

<script> export default {methods: {/*** 遍历列的所有内容，获取最宽一列的宽度* @param arr*/getMaxLength (arr) {return arr.reduce((acc, item) => {if (item) {const calcLen = this.getTextWidth(item)if (acc < calcLen) {acc = calcLen}}return acc}, 0)},/*** 使用span标签包裹内容，然后计算span的宽度 width： px* @param valArr*/getTextWidth (str) {let width = 0const html = document.createElement('span')html.innerText = strhtml.className = 'getTextWidth'document.querySelector('body').appendChild(html)width = document.querySelector('.getTextWidth').offsetWidthdocument.querySelector('.getTextWidth').remove()return width},/*** el-table-column 自适应列宽* @param prop_label: 表名* @param table_data: 表格数据*/flexColumnWidth (label, prop) {// console.log('label', label)// console.log('prop', prop)// 1.获取该列的所有数据const arr = this.tableData.map(x => x[prop])arr.push(label) // 把每列的表头也加进去算// console.log(arr)// 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）return (this.getMaxLength(arr) + 25) + 'px'}}
}

别忘记了还得设置CSS

<style scoped>.el-table /deep/ th {padding: 0;white-space: nowrap;min-width: fit-content;}.el-table /deep/ td {padding: 1px;white-space: nowrap;width: fit-content;}/** 修改el-card默认paddingL:20px-内边距 **/>>> .el-card__body {padding: 10px;}.el-table /deep/ .cell {white-space: nowrap;width: fit-content;}
</style>