前情提要
在平时的项目里，elemengUI的表格算是一个高频使用点，绑定个数组，给每列一个列名绑定一个属性就可以优雅的展示出来。
弊端解析
表格十分好用，但也有弊端，就是如果不设置列的宽度，那么所有列都会均分表格的宽度。但是由于每列的内容宽度不一致，例如有些列是url，有些列是电话，如果不做处理会使表格行高变得非常高。于是我的产品告诉我需要定高，内容横向撑开，翻看了文档也没有找到解决办法，于是选择自己手写个函数。
函数一览
首先需要了解，我们可以给每一列设置width来控制列宽。现在让我们来统计下得出列宽的几个值。
- 我们可以直接获得表格宽度
tablewidth。 - 比较难得是内容撑开这一问题，一开始想的是统计字符再做换算，但觉得不是很精确。后面决定了将设置内容
white-space:no-wrap控制不换行，设置dispaly为inline-block。此时内容区宽度即是真正内容撑开的宽度。 - 每列的每个单元格大小不一，应该选择最大的为基准来作为本列的宽度。
以上就形成了基本逻辑，函数雏形如下。
adjustColumnWidth () {
var maxArr = []
const colgroup = document.querySelector('.el-table colgroup')
const colDefs = [...colgroup.querySelectorAll('col')] // 获取有哪些列
colDefs.forEach((col, index) => {
const clsName = col.getAttribute('name') // 获取该列列名
const cells = [
...document.querySelectorAll(`td.${clsName}`) // 获取该列所有单元格不包括表头
]
const widthList = cells.map((el) => {
return el.querySelector('.cell') ? el.querySelector('.cell').scrollWidth : 0 // 获取该列所有单元格宽度
})
const max = Math.max(...widthList) // 获取该列所有单元格宽度最大值
const padding = 32
maxArr.push((max + padding > 80) ? (max + padding) : 80) // 如果该单元格为空，预留点宽度让该列列名能正常显示（视情况而加）
})
}
当所有列宽度加起来小于页面能容纳的表格最大宽度时，表格没有完成撑开，这是因为我们没有分配剩余宽度，改进如下：
adjustColumnWidth (table) {
var maxArr = []
var tableWidth = document.querySelector('.panel-other .el-tabs').scrollWidth // 页面能容纳的表格最大宽度
const colgroup = table.querySelector('colgroup')
const colDefs = [...colgroup.querySelectorAll('col')] // 获取有哪些列
colDefs.forEach((col, index) => {
const clsName = col.getAttribute('name') // 获取该列列名
const cells = [
...document.querySelectorAll(`td.${clsName}`) // 获取该列所有单元格不包括表头
]
const widthList = cells.map((el) => {
return el.querySelector('.cell') ? el.querySelector('.cell').scrollWidth : 0 // 获取该列所有单元格宽度
})
const max = Math.max(...widthList) // 获取该列所有单元格宽度最大值
const padding = 32
maxArr.push((max + padding > 80) ? (max + padding) : 80) // 如果该单元格为空，预留点宽度让该列列名能正常显示（视情况而加）
})
maxArr.splice(maxArr.length - 2, 2)
var totalWidth = maxArr.reduce(function (prev, curr, idx, arr) {
return prev + curr
})
if (tableWidth > totalWidth) {
var width = (tableWidth - totalWidth - 100) / maxArr.length // 均分剩余宽度
maxArr = maxArr.map((item, index) => item + width)
}
}
剩下的就是把maxArr这个函数分配给表格的每一列属性width即可实现。
顺利结束！
