专业足球网站建设,大连装修公司哪家好,软件技术专升本考什么科目,做金融服务网站赚钱【背景小记】
el-table的el-table-column如果不指定width的话#xff0c;会自动设定一个宽度#xff0c;表格内容会自动换行#xff0c;对强迫症用户来说非常不友好#xff0c;为了追求完美用户体验#xff0c;所以这里需要实现两个效果#xff1a;
1. 强制表格内容不换…【背景小记】
el-table的el-table-column如果不指定width的话会自动设定一个宽度表格内容会自动换行对强迫症用户来说非常不友好为了追求完美用户体验所以这里需要实现两个效果
1. 强制表格内容不换行显示
2. 实现表格列宽自适应撑开
【代码实现】
templateel-table reftableRef v-loadingloading :datatableData border stripe :header-cell-styleMyHeaderCellStyle :cell-styleMyCellStyle show-summary :summary-methodaccountSummaries2 :heightTableHeightel-table-column label序号 typeindex aligncenter fixed /el-table-column label单位 propbranch_name aligncenter fixed sortable sort-bybranch_no :widthflexColumnWidth(单位,branch_name) /el-table-column v-foritem in headerData :keyitem.name :labelitem.name aligncenterel-table-column v-forobj in item.children :keyobj.prop :labelobj.label :propobj.prop aligncenter sortable :formatterhandleFormatter //el-table-column/el-table
/template给需要自适应列宽的column写一个动态的width :widthflexColumnWidth(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 getTextWidthdocument.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【参考】
vue el-table 自适应表格内容宽度 - 黄小雪 - 博客园
elementui的el-table根据列内容长度自适应调整列宽_树上骑个猴的博客-CSDN博客
工具大全https://aiburgeon.com/siteCollection/
