element ui设置table自适应表格宽，不自动换行

2024-07-17 14:10| 来源: 网络整理| 查看: 265

在我们平常开发使用element ui中的table时，会出现数据过长自动换行的结果，如果把宽给死的情况下也不太适合，接下来提供二种方式去动态计算每个盒子的宽度。

在这里插入图片描述

第一种方式表格加** table-layout='auto’ **属性表格加tableAuto类名el-table-column标签不设置宽度 // 设置超出不折行 .tableAuto.el-table .cell { white-space: nowrap; }

但这种方式纯在二个问题 1.el-table-column左侧多个列加fixed属性，左右滑动，列宽得提前计算 2.el-table设置table-layout='auto’ 与固定表头的功能冲突，表头无法再固定

第二种方式（推荐使用第二种方式）

第二种方式就是通过canvas动态计算el-table-column宽度，可以完美解决第一种方式的2中弊端。

/** * dynamicCalculationWidth * @param string | number prop 每列的prop 可传'' * @param array tableData 表格数据 * @param string | number title 标题长内容短的，传标题可不传 * @param number num 列中有标签等加的富余量 * @returns 每列的宽度 * 注：prop,title有一个必传 */ dynamicCalculationWidth(prop, tableData, title, num = 0) { if (tableData.length === 0) { // 表格没数据不做处理 return } let flexWidth = 0 // 初始化表格列宽 let columnContent = '' // 占位最宽的内容 let canvas = document.createElement('canvas') let context = canvas.getContext('2d') context.font = '14px Microsoft YaHei' if (prop === '' && title) { // 标题长内容少的，取标题的值, columnContent = title } else { // 获取该列中占位最宽的内容 let index = 0 for (let i = 0; i index = i } } columnContent = tableData[index][prop] // 比较占位最宽的值跟标题、标题为空的留出四个位置 const column_w = contexasureText(columnContent).width const title_w = contexasureText(title).width if (column_w

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章