需求
公司項目需求是要做動態響應式表頭,因此就要動態渲染表格表頭寬度在一定範圍內(100px-200px)。
完整實現圖:
實現過程
這裏就不講css自動超出省略了,主要是然後根據後臺返回的字符串計算實際渲染字符寬度,並設置給 element 表頭的 min-width
:min-width="calcMinWidth(item.displayName)"
核心函數代碼:
calcMinWidth(displayName) {
// 100 - 200
// console.log(displayName.length)
console.log(displayName)
// 計算文本在頁面所佔px寬度 -- 擴展String原型方法pxWidth
String.prototype.pxWidth = function(font) {
const canvas =
String.prototype.pxWidth.canvas ||
(String.prototype.pxWidth.canvas = document.createElement('canvas'))
const context = canvas.getContext('2d')
font && (context.font = font)
const metrics = context.measureText(this)
return metrics.width
}
// 根據需求範圍返回
const width = displayName.pxWidth('bold 18px Lato') + 30
if (width <= 100) {
return '100'
} else if (width >= 200) {
return '200'
} else {
return width + ''
}
},
因爲我這個是英文項目,沒有考慮中文字符,如果存在中文字符還需要特別處理,更多請參考下面的文章。