【vue】ElementUI el-table自适应列宽实现
1.FastReport换行配置2..net前端传字符串到后台接口不完整3.数据库查询字段前N个字符4.I标签禁用触发事件5.Sql时间格式化6.从数组中,直接获取所需数据7.Sql 截取字符串方式8.SQL日期格式9.定义了鼠标指针放在一个元素边界范围内时所用的光标形状10.VsCode打包11.WCF12.MD5加密13.WCF服务支持http14.获取计算机信息15.文件复制/解压16.向服务器上传文件17.向服务器更新文件18..net 在config中取值19.在DevExpress GridControl的一列中显示图片20.定时timer21.直接在对象数组中找数据22.uni-app 请求接口报错request:fail abort statusCode:-123..net接口出现405跨域错误24.css样式变量25.sql 多列合并成一个字符串26.Http404.3 MIME映射问题27.动态添加RibbonPageGroup/NavBarGroup28.Sql/MySql 连接配置29.动态添加XtraPrivotGrid/XtraGrid30.IIS错误50031.dropDownButton使用方法32.xml文件创建/写入33.服务器无法访问题34.DEV控件加载到VS工具箱中35.签名时出错: 未在路径 C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\bin36.旋转弧度计算方式JS37.微信小程序上传图片报错:uploadFile:fail url not in domain list38..NET混合开发解决方案WebView2控件的导航事件39.uniapp项目打包为桌面应用的方法步骤40.WCF 接收我服务的 HTTP 响应时发生错误41.vscode之vue文件代码格式化代码无效解决办法42.Vue框架规则类错误
43.【vue】ElementUI el-table自适应列宽实现
44.uni-app electron打包成exe应用45.HTTP Error 503. The service is unavailable.46.接口对接Get/Post47.Guid随机生成36位数48.Timer计时器实现定时49.HTTP 请求 (Request)50.接口开发笔记-WebApi51.ASP.NET 自定义控件52.uni-app 版本更新53.图片转二进制的相互转化54.uni-app 设置多语言切换uni-i18n插件55.uniapp 在 Android Studio 模拟器中运行项目56.前端css中animation(动画)的使用57.Android 模拟机配置内网58.前端圆形倒球体环绕/波纹动态图【背景小记】
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果:
-
强制表格内容不换行显示
-
实现表格列宽自适应撑开
<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 = 0 const html = document.createElement('span') html.innerText = str html.className = 'getTextWidth' document.querySelector('body').appendChild(html) width = document.querySelector('.getTextWidth').offsetWidth document.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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂