Use canvas to measure the real width of text to set the column width of each column in el-Table

First, listen on the data bound to the table in watch:

data(valArr) { const _this = this this.formThead = this.formThead.map(function (value) { const arr = valArr.map((x) => Value. Width = _this.getMaxLength(arr) + 20 // The maximum width of each column Return value})}Copy the code

Calculate the maximum width of each column:

getMaxLength(arr) { String.prototype.pxWidth = function (font) { var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement('canvas')), context = canvas.getContext('2d') font && (context.font = font) var metrics = context.measureText(this) return metrics.width } return arr.reduce((acc, Item) => {if (item) {const calcLen = (item + '').pxWidth('bold 12pt Arial ') If (acc < calcLen) {acc = calcLen}} return acc}, 0)}Copy the code