Element Vue 框架的 Table 列宽度自适应解决方案
# 原理
请求获取数据后，遍历数据，动态渲染一个节点，获取节点的宽度，最后改变表格列宽度
# 核心代码
/**
* 计算字符串宽度
* @param str
* @returns {number}
*/
function getStrWidth (str) {
if (!document.getElementById('str-width')) {
document.getElementsByTagName('body')[0].insertAdjacentHTML('beforeend', '<span id="str-width"></span>')
}
document.getElementById('str-width').innerText = str
return Math.ceil(document.getElementById('str-width').getBoundingClientRect().width) + 20 // 多加 20px 是为了容错
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#str-width {
position: fixed;
opacity: 0;
top: 0;
left: 0;
}
1
2
3
4
5
6
2
3
4
5
6
# 补充
修改 table 的 layout 为 auto，td 添加 css 不换行，这会失去部分功能，看自己取舍