vue中element Table表格宽度根据显示的内容自适应

<el-table
v-loading="loading"
:data="mainData"
style="width: 100%"
:height="tableHeight"
>
<el-table-column type="index"></el-table-column>
<el-table-column
prop="cqi01"
:label="$fy('员工编号')"
:width="flexWidth('cqi01', mainData, this.$fy('员工编号'))"
></el-table-column>

methods:{

/**
* flexWidth
* @param prop 每列的prop 可传''
* @param mainData 表格数据
* @param title 标题长内容短的，传标题 可不传
* @param num 列中有标签等加的富余量
* @returns string
* 注：prop,title有一个必传

下方mainData必须和表格定义一致
*/
flexWidth(prop, mainData, title, num = 0) {
if (!mainData || mainData.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 < mainData.length; i++) {
const now_temp_w = context.measureText(mainData[i][prop] + '').width
const max_temp_w = context.measureText(
mainData[index][prop] + '',
).width
if (now_temp_w > max_temp_w) {
index = i
}
}
columnContent = mainData[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 = Math.round(width.width + 40 + num)
return flexWidth + 'px'
},

}