原文链接

重点就一个方法 :width="flexColumnWidth(‘date’,tableData)"
第一个参数是这个列的字段
第二个参数是这个表格的数据
只需要给对应的列 el-table-column 标签加上此方法 即可做到此列自适应
其他的列想要自适应宽度 同样使用 :width 方法即可

此段代码可直接复制使用:

这是情景一:

  • 需要自适应宽度的数据string,直接是在数组每一项下
<template><div style="width:1400px;"><el-table border :data="tableData" fit style="width: 100%"><el-table-column label="日期" :width="flexColumnWidth('string',tableData)"><template slot-scope="scope"><span>{{ scope.row.string }}</span></template></el-table-column><el-table-column prop="a" label="a"></el-table-column><el-table-column prop="b" label="b"></el-table-column><el-table-column prop="c" label="c"></el-table-column><el-table-column prop="d" label="d"></el-table-column><el-table-column prop="e" label="e"></el-table-column><el-table-column prop="f" label="f"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>export default {data () {return {tableData: [{string: '条件他又长又短的', name: '王小虎', a: '12', b: '211', c: '11111111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1518 弄'},{string: '一二三四五六七八九十', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1517 弄'},{string: '条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦', name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1519 弄'},{string: '条件他又长又看到配佛分富婆看哦考配哦', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'}]}},methods: {// 自适应表格列宽flexColumnWidth (str, arr1, flag = 'max') {// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max'// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。str = str + ''let columnContent = ''if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {return}if (!str || !str.length || str.length === 0 || str === undefined) {return}if (flag === 'equal') {// 获取该列中第一个不为空的数据(内容)for (let i = 0; i < arr1.length; i++) {if (arr1[i][str].length > 0) {// console.log('该列数据[0]:', arr1[0][str])columnContent = arr1[i][str]break}}} else {// 获取该列中最长的数据(内容)let index = 0for (let i = 0; i < arr1.length; i++) {if (arr1[i][str] === null) {return}const now_temp = arr1[i][str] + ''const max_temp = arr1[index][str] + ''if (now_temp.length > max_temp.length) {index = i}}columnContent = arr1[index][str]}// console.log('该列数据[i]:', columnContent)// 以下分配的单位长度可根据实际需求进行调整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符,为字符分配8个单位宽度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符,为字符分配15个单位宽度flexWidth += 15} else {// 其他种类字符,为字符分配8个单位宽度flexWidth += 8}}if (flexWidth < 80) {// 设置最小宽度flexWidth = 80}// if (flexWidth > 250) {//   // 设置最大宽度//   flexWidth = 250// }return flexWidth + 'px'}}
}
</script>

这是情景二:

  • 我们要自适应的这个列的数据字段 嵌套了一层 是在tableData每一个对象下的obj1对象里
  • 此时就需要将 flexColumnWidth 方法的 取值方式修改下,直接修改成 arr1[i]['obj1']['string']arr1[index]['obj1']['string'],既去取每一项对象下obj1下的string。

代码可以直接复制使用:

<template><div style="width:1300px;"><el-table border :data="tableData" fit style="width: 100%"><el-table-column label="文字" :width="flexColumnWidth('string',tableData)"><template slot-scope="scope"><el-input v-model="scope.row.obj1.string"></el-input></template></el-table-column><el-table-column prop="a" label="a"></el-table-column><el-table-column prop="b" label="b"></el-table-column><el-table-column prop="c" label="c"></el-table-column><el-table-column prop="d" label="d"></el-table-column><el-table-column prop="e" label="e"></el-table-column><el-table-column prop="f" label="f"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>export default {data () {return {tableData: [{obj1: { string: '条件他又长又短的' }, name: '王小虎', a: '12', b: '211', c: '11111111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1518 弄'},{obj1: { string: '一二三四五六七八九十' }, name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1517 弄'},{obj1: { string: '条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦' }, name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1519 弄'},{obj1: { string: '条件他又长又看到配佛分富婆看哦考配哦' }, name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'}]}},methods: {// 自适应表格列宽flexColumnWidth (str, arr1, flag = 'max') {console.log(str)// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max'// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。str = str + ''let columnContent = ''if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {return '80px' // 给个默认的}if (!str || !str.length || str.length === 0 || str === undefined) {return '80px' // 给个默认的}if (flag === 'equal') {// 获取该列中第一个不为空的数据(内容)for (let i = 0; i < arr1.length; i++) {if (arr1[i]['obj1']['string'].length > 0) {// console.log('该列数据[0]:', arr1[0]['obj1']['string'])columnContent = arr1[i]['obj1']['string']break}}} else {// 获取该列中最长的数据(内容)let index = 0for (let i = 0; i < arr1.length; i++) {if (arr1[i]['obj1']['string'] === null) {return}const now_temp = arr1[i]['obj1']['string'] + ''const max_temp = arr1[index]['obj1']['string'] + ''if (now_temp.length > max_temp.length) {index = i}}columnContent = arr1[index]['obj1']['string']}// console.log('该列数据[i]:', columnContent)// 以下分配的单位长度可根据实际需求进行调整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符,为字符分配8个单位宽度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符,为字符分配15个单位宽度flexWidth += 15} else {// 其他种类字符,为字符分配8个单位宽度flexWidth += 8}}if (flexWidth < 80) {// 设置最小宽度flexWidth = 80}// if (flexWidth > 250) {//   // 设置最大宽度//   flexWidth = 250// }// 可以再多留部分的paddingflexWidth += 30return flexWidth + 'px'}}
}
</script>

情景三:在表格的总宽度不够时候,会出现滚动条 是正常的。此时剩余的每列会自动平均分配获得相等宽度

情景四:也可以手动给剩余的分配列宽比例

注意是两种数据结构 两种方法的细节不一样!

el-table列宽自适应;el-table表格的列根据内容自动撑满;el-table内容换行问题;相关推荐

  1. bootstraptable列宽自适应内容_多列列表框行高和列宽的自适应调整

    LabVIEW:2015 在使用多列列表框(Multicolumn Listbox)时,有时不同列显示的内容长度不一致,为了显示更加美观,并节省界面显示空间,需要实现多列列表框的行高和列宽的自适应调整 ...

  2. Hutool工具类ExcelWriter导出excel列宽自适应问题解决

    前言: 因为项目中需要使用到ExcelWriter导出excel的列宽自适应,下面为解决该问题的经过,希望可以对遇到同样问题的开发者有所帮助. 一.通过查询Hutool官方的api文档发现autoSi ...

  3. HTML Table 固定列宽,实现excel表格效果

    (1)获取行号 <table> <tr onmouseover ="showIndex(this)"><td>1</td></ ...

  4. el-table表格列宽自适应处理

    在最近的项目中,有这么一个需求,就是要表格的列宽随内容的宽度自适应. 将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 <el-table v-tableFit></el ...

  5. antd 表格列宽自适应方法以及错误处理

    当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量 也就是没有设置宽度的列会平分表格中余下的宽度 在antd 的表格中, 当你不设置表格滚动, 并且你给每一列 ...

  6. UiPath设置Excel表格自适应行高、自适应列宽或固定行高、列宽

    话不多说,上图,添加第三方包:BalaReva.Excel.Activities, 使用AutoFit Columns 设置列宽,设置属性(若需要固定值设置对应参数即可) 自动调整列宽.自动调整行高

  7. NPOI给word中的表格table动态添加行,并保留表格样式 , 替换文字时文字中包含<br/>换行

    public class NPOIHelper{/// <summary>/// 输出模板docx文档/// </summary>/// <param name=&quo ...

  8. el-table某列的列宽自适应,其他列按比例分配。

    情景一:例如首列按照内容自适应展开,其余列有各自的比例. 注意点: 给需要自适应展开的列加 :width="flexColumnWidth"计算方法 就可以自适应展开 需要给余下所 ...

  9. POI导出excel--设置字体,颜色,行高自适应,列宽自适应,锁住单元格,合并单元格

    1. 前言 poi框架可以支持我们在java代码中, 将数据导出成excel , 在上一篇 如何使用POI导出excel表格,以及处理浏览器无法识别下载文件的问题 中已经详细的进行了介绍 , 但是实际 ...

最新文章

  1. 项目ITP(五) spring4.0 整合 Quartz 实现任务调度
  2. 2.2.4 调度算法: 先来先服务 最短作业优先 最高相应比优先
  3. (*长期更新)软考网络工程师学习笔记——Section 17 交换技术原理
  4. nssl1217-So many prefix?【KMP】
  5. python变量生命周期_python 变量定义及变量生命周期
  6. Python 判断字符串是否为IP(字符串中是否包含IP)
  7. Visual Studio——fatal error C1902: Program database manager mismatch; please check your installation
  8. 三分钟理解Python函数式编程与闭包
  9. TOMCAT 连接池数据库密码加密方法
  10. Linux作者批评英特尔指令集,Linux之父炮轰英特尔:ECC内存很重要,不好买都怪你胡搞...
  11. 读“游戏之旅——我的编程感悟”:难得的休闲读物
  12. 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第1节 常用函数接口_3_性能浪费的日志案例...
  13. 高清成主流 十大最受用户关注摄像头
  14. idea保存快捷键_IntelliJ IDEA 快捷键大全 | 终极版
  15. C++网络编程实例(socket)
  16. 蒋文华《博弈论》笔记及视频摘录
  17. xp系统计算机怎么连接到网络打印机,xp打印机共享怎么设置(教你如何在电脑上连接XP系统的共享打印机)...
  18. jquery中使用ajax的php实例
  19. HTML5期末大作业:旅游网站设计——北京旅游(1页) 北京旅游网页设计制作 简单静态HTML网页作品 我的旅游网页作业成品 学生旅游网站模板
  20. 样本不均衡 Weighted cross entropy and Focal loss

热门文章

  1. 查看NTFS文件系统版本号
  2. 我的blog开张了,希望大家能多多赏光啊
  3. 团队管理新思考_需要一个新的空间来思考讨论和行动
  4. leetcode 1449. 数位成本和为目标值的最大数字(dp)
  5. shell脚本_Shell脚本
  6. arduino joy_如何用Joy开发Kubernetes应用
  7. 验证曲线和学习曲线_如何击败技术学习曲线的怪物
  8. tableau for循环_Tableau for Data Science and Data Visualization-速成课程
  9. 机器学习集群_机器学习中的多合一集群技术在无监督学习中应该了解
  10. Leetcode690.Employee Importance员工的重要性