element ui设置table自适应表格宽,不自动换行问题
作者：想吃手撕面包
这篇文章主要介绍了element ui设置table自适应表格宽,不自动换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element ui设置table自适应表格宽,不自动换行
在我们平常开发使用element ui中的table时，会出现数据过长自动换行的结果，
如果把宽给死的情况下也不太适合，接下来提供二种方式去动态计算每个盒子的宽度。
第一种方式
- 表格加** table-layout='auto’ **属性
- 表格加tableAuto类名
- el-table-column标签不设置宽度
<el-table :data="tableData" table-layout='auto' class="tableAuto">
<el-table-column prop="name" label="名称" />
</el-table>
// 设置超出不折行
<style>
.tableAuto.el-table .cell {
white-space: nowrap;
}
</style>
但这种方式纯在二个问题
1.el-table-column左侧多个列加fixed属性，左右滑动，列宽得提前计算
2.el-table设置table-layout='auto’ 与 固定表头 的功能冲突，表头无法再固定
第二种方式 （推荐使用第二种方式）
第二种方式就是通过canvas动态计算el-table-column宽度，可以完美解决第一种方式的2中弊端。
<template>
<el-table>
<el-table-column :width="flexWidth(item.en, tableData, item.cn)"></el-table-column>
</el-table>
</temolate>
<script>
/**
* 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 < tableData.length; i++) {
const now_temp = tableData[i][prop] + ''
const max_temp = tableData[index][prop] + ''
const now_temp_w = context.measureText(now_temp).width
const max_temp_w = context.measureText(max_temp).width
if (now_temp_w > max_temp_w) {
index = i
}
}
columnContent = tableData[index][prop]
// 比较占位最宽的值跟标题、标题为空的留出四个位置
const column_w = context.measureText(columnContent).width
const title_w = context.measureText(title).width
if (column_w < title_w) {
columnContent = title || '占位符呀'
}
}
// 计算最宽内容的列宽
let width = context.measureText(columnContent)
flexWidth = width.width + 40 + num
return flexWidth + 'px'
},
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。