自定义vxe-table表头标题文字过多，显示两行多余省略号并给出tooltip

本文首发于个人站点 自定义vxe-table表头标题文字过多，显示两行多余省略号并给出tooltip
笔者个人站点 秋码记录

本文在上一篇的基础上，手动实现tooltip vue vxe-table表格标题根据内容宽度自动换行

效果如下

1、首先在body创建一个 Element

let tooltipDiv = document.createElement('div')
tooltipDiv.setAttribute("class","vxe-table--tooltip-wrapper")
document.body.appendChild(tooltipDiv);

2、对表头添加鼠标移入移出事件

mounted() {
    let that = this
setTimeout( () => {
				const tooltipDom = document.querySelector('.vxe-table--tooltip-wrapper')

				let th =document.querySelectorAll('.vxe-table--header th.vxe-header--column')


				let storeColumn = this.$store.state.autoFilter.columnTitleObj

				for(let i=0;i<th.length;i++){
					let colid = th[i].getAttribute("colid")
					let currColumn = that.$refs.table.getColumnById(colid)
					let isTooltip = false
					let orgTitle = ''
					for(let j = 0; j < storeColumn.length; j++){
						if(storeColumn[j]['prop'] == currColumn['property']){
							isTooltip = storeColumn[j]['tooltip']
							orgTitle = storeColumn[j]['orgTitle']
							break
						}
					}

					if(isTooltip){
						th[i].addEventListener('mouseenter',(e) => {

							const { scrollTop, scrollLeft, visibleWidth } = this.$TOOL.getDomNode()
							const { top, left } = this.$TOOL.getAbsolutePos(e.target)
							const el = th[i]
							const marginSize = 6
							const offsetHeight = el.offsetHeight
							const offsetWidth = el.offsetWidth
							let tipLeft = left
							//let tipTop = top - offsetHeight - marginSize
							tipLeft = Math.max(marginSize, left + Math.floor((e.target.offsetWidth - offsetWidth) / 2))
							if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
								tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
							}
							if (top - offsetHeight < scrollTop + marginSize) {
								//tipStore.placement = 'bottom'
								//tipTop = top + e.target.offsetHeight + marginSize
							}

							let arrowLeft = `${left - tipLeft + e.target.offsetWidth / 2}px`


							tooltipDom.classList.add("theme--dark","size--small","placement--top","is--enterable",
								"is--visible","is--arrow","is--actived")
							tooltipDom.setAttribute("style","width:auto;left:"+tipLeft+"px;top:126px;z-index:1000;")

							tooltipDom.innerHTML = '<div class="vxe-table--tooltip-content">'+orgTitle+'</div><div class="vxe-table--tooltip-arrow" style="left:'+arrowLeft+'"></div>'

						})

						th[i].addEventListener( 'mouseleave',() => {
							console.log('鼠标移出')
							tooltipDom.classList.remove("placement--top","is--visible","is--actived")
						})

					}


				}

			},1500)
}

工具函数

/**
 * 获取某DOM节点的信息
 * @param elem {object} DOM节点
 * @returns {{boundingLeft: number, visibleWidth: *, top: *, left: *, boundingTop: number, visibleHeight: *}}
 */
tool.getAbsolutePos = function(elem){
	const bounding = elem.getBoundingClientRect()
	const boundingTop = bounding.top
	const boundingLeft = bounding.left
	const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = this.getDomNode()
	return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
}
/**
 * 获取body DOM对象相关信息
 * @returns {{visibleWidth: number, visibleHeight: number, scrollLeft: number, scrollTop: number}}
 */
tool.getDomNode = function() {
	const documentElement = document.documentElement
	const bodyElem = document.body
	return {
		scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
		scrollLeft: documentElement.scrollLeft || bodyElem.scrollLeft,
		visibleHeight: documentElement.clientHeight || bodyElem.clientHeight,
		visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
	}
}

在vuex加入

export default {
	state: {
		columnTitleObj: [], //列表头标题
		orgTitle: '', //原表头标题
	},
	mutations:{
		SET_COLUMN_TITLE(state,item){
			state.columnTitleObj = item
		},
		SET_ORG_TITLE(state,item){
			state.orgTitle = item
		},
	}
}

在 resizableChange 方法添加如下内容

resizableChange({column}){
let orgColumn = this.$store.state.autoFilter.columnTitleObj

				for(let i = 0; i < orgColumn.length; i++){
					if(orgColumn[i].prop == column.property){
						this.$store.commit("SET_ORG_TITLE", orgColumn[i]['orgTitle'])
						break
					}
				}

				let orgTitle = this.$store.state.autoFilter.orgTitle

				let l = orgTitle.length //column.title.length
				let f = 16 //每一个字大小，实际上是每一个字的比例值，大概会比字体大小差很少大一点，


				let subLen = ~~(2 * (Number(column['resizeWidth']) - 30 )) / f

				let lineCount = ~~((Number(column['resizeWidth']) - 30 ) / f)
				let showTextNum = 2 * lineCount


				let isTooltip = false
				if(l > showTextNum){
					column.title = this.$TOOL.subString(orgTitle,10,true)
					isTooltip = true


				}else{
					column.title = this.$TOOL.subString(orgTitle,subLen,false)
					isTooltip = false

				}

				for(let i = 0; i < orgColumn.length; i++){
					if(orgColumn[i].prop == column.property){
						orgColumn[i].tooltip = isTooltip
						break
					}
				}

				this.$store.commit("SET_COLUMN_TITLE", orgColumn)
}